jQuery .toggle() jQuery UI 탭의 이상한 동작

Question

좋아, 여기 내 문제가있다. 기사를 클릭 한 상태에서 기사에 대한 정보를 표시/숨기려면 토글을 사용하는 페이지가 있습니다. 그리고 jQuery UI Tabs를 사용하는 다른 페이지에서 같은 페이지를 표시하지만 다른 매개 변수 (정확한 3 개의 탭 : 비율, 날짜 및 이름순)를 표시합니다.

탭을 전환하고 다른 탭에서 요소를 전환하기 전까지는 모든 것이 정상적으로 작동합니다. - 모든 것이 정상적으로 작동하는 경우가 있습니다. - 가끔씩 아무 일도 일어나지 않습니다. - 스크립트가 여러 번로드 된 것처럼 여러 번 토글하는 경우가 있습니다. 내가 탭 표시

페이지 :

여기 내 코드의 더 정확하게하기 위해

<link rel="stylesheet" href="/projectsoul/CSS/design/jquery.ui.all.css" /> 
<link rel="stylesheet" href="/projectsoul/CSS/design/jquery-ui-1.8.21.custom.css" /> 
<script type="text/javascript" src="/projectsoul/JS/jquery-1.7.2.min.js"></script> 
<script type="text/javascript" src="/projectsoul/JS/jquery-1.7.2.js"></script> 
<script type="text/javascript" src="/projectsoul/JS/jquery-ui-1.8.21.custom.min.js"></script> 

<?php 
while($articles= $articles_data->fetch()) 
{?> 

<h2><a class="toggler" id="displayText<?php echo $articles["id"] ?>"><?php echo nl2br(htmlspecialchars($articles["name"])); ?></a></h2> 

    ... 
    ... 

    <div class="toggle" id="displayText<?php echo $articles["id"] ?>_content"> 
// CONTENT     
    </div> 


    } 
    // END OF WHILE 

    <script> 
    $(document).ready(function() { 
     $('.toggle').hide(); 
     $('.toggler').click(function() { 
      var target = this.id + '_content'; 
      // Use ID-selectors to toggle a single element. 
      $('#' + target).toggle(); 
      // Use class-selectors to toggle groups of elements. 
      $('.' + target).toggle(); 
      $('.toggle.always').toggle(); 
     }); 
    }); 
    </script> 

로 :

<link rel="stylesheet" href="/projectsoul/CSS/design/jquery.ui.all.css" /> 
    <link rel="stylesheet" href="/projectsoul/CSS/design/jquery-ui-1.8.21.custom.css" /> 
    <script type="text/javascript" src="/projectsoul/JS/jquery-1.7.2.min.js"></script> 
    <script type="text/javascript" src="/projectsoul/JS/jquery-1.7.2.js"></script> 
    <script type="text/javascript" src="/projectsoul/JS/jquery-ui-1.8.21.custom.min.js">      </script> 

       ... 
       ... 
       ... 
     <div id="content" class="content" class="ui-tabs"> 
     <ul> 
      <li><a href="articles.php" ><span>By Date</span></a></li> 
      <li><a href="articles.php?orderby=rate"><span>By Rate</span></a></li> 
      <li><a href="articles.php?orderby=name"><span>By Name</span></a></li> 
     </ul> 
    </div> 

    .... 
    .... 
    .... 


     $("#content").tabs({ 
     ajaxOptions: { 
      error: function(xhr, status, index, anchor) { 
       $(anchor.hash).html(
        "Fail to load content." 
        ); 
      } 
     } 
    }); 

    $("#content").tabs({ 
      fx: { height: 'toggle', opacity: 'toggle', duration: 'slow' } 
     }); 

    $('#content').tabs({ 
     load: function(event, ui) { 
      $(ui.panel).delegate('.intabs', 'click', function(event) { 
       $(ui.panel).load(this.href); 
       event.preventDefault(); 
      }); 
     } 
    }); 

그리고 지금은, 여기에 내가이 탭에 표시되는 페이지입니다 나는 두 번째 페이지가 단독으로 표시 될 때 토글 작업을했다. 그러나 탭과 전환 후 더 이상 작동하지 않습니다.

내가 검색했지만 찾은 게없는 것 같습니다. 아이디어가 있습니까?

은 내가 "^^ 자신을 분명하게 희망

Answer 1

좋아, 문제가 해결.

F 또는 이와 같은 문제가있는 사용자 :

주로 문제는 각 탭에 콘텐츠가로드되고 탭 사이에 토글 된 div의 ID에 별개의 값이 없음을 알 수 있습니다.

<div class="toggle" id="displayText<?php echo $articles["id"] ?>_content"> 

그런 식으로 : 은 그냥 변경

이

<div class="toggle" id="displayText<?php echo $articles["id"] ?>_<?php echo $current_tab_id ?>_content"> 

Answer 2

내가 거기에 당신이 그렇게하고있는 특정 이유는,하지만 로딩 JQuery와 두 번 일반적으로 좋은 생각이 아니다 있는지 확실하지 않습니다.에 두 페이지를 제한하는 시도 중 JQuery와 또는 jquery.min은 (당신이 그것을 두 번 jQuery를 받고 걱정할 필요가 없습니다 그래서 iframe이있는 페이지가 상위 페이지의 스크립트에 의해 영향을받지 않습니다).

loading jquery twice causes an error?