jQuery .toggle（）使用jQuery UI标签的奇怪行为

Question

好的，这是我的问题。 我有一个页面，我使用切换显示/隐藏有关文章的信息，只需单击名称即可。 我有另一个页面，使用jQuery UI选项卡来显示相同​​的页面，但具有不同的参数（确切地说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> 

       ... 
       ... 
       ... 
     <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(); 
      }); 
     } 
    }); 

而现在，这里是页面我在这些选项卡显示：

<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> 

由于我说，单独显示第二页时的切换工作。但在选项卡中，切换后它不再工作。

我已经搜索，但没有发现任何似乎是这样的东西... 任何想法？

我希望我自己清楚^^”

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"> 

（当然$ current_tab_id内容标签的ID显示）

Answer 2

我不知道是否有你这样一个特别的原因，但装载的jQuery两次一般是不是一个好主意，试着限制两个页面要么jQuery的或jquery.min（在iframe页面不受父页面的脚本，所以你不应该担心它让jQuery的两倍）。

loading jquery twice causes an error?