.collapse（）点击首次

Question

我有一个奇怪的问题，用下面的代码A HREF时错误：http://jsfiddle.net/rc1chhtd/4/

在实践

，第一次点击一个链接，塌陷方法被调用为每而不是最后一个。然后一切都完美。任何提示？

HTML

<div class="col-md-3"> 

     <p class="lead">Menu</p> 

     <div id="sidebar" class="list-group"> 

       <a href="#" class="list-group-item active" name="dashboard"> 
        <i class="icon-dashboard"></i> Dashboard 
       </a> 

       <a href="#" class="list-group-item" name="a-s-c"> 
        <i class="icon-group"></i> Arte Storia e Cultura 
       </a> 


       <a href="#enogastronomia" class="list-group-item" data-parent="#sidebar" name="enogastronomia"> 
        <i class="icon-group"></i> Enogastronomia 
        <span class="badge bg_danger">3</span> 
       </a> 

        <div id="enogastronomia" class="list-group subitem collapse">  

         <a href="#" class="list-group-item"> 
          <i class="icon-caret-right"></i> Sub 1 
         </a> 

         <a href="#" class="list-group-item"> 
          <i class="icon-caret-right"></i> Sub 2 
         </a> 

         <a href="#" class="list-group-item"> 
          <i class="icon-caret-right"></i> Sub 3 
         </a> 

        </div> 

       <a href="#" class="list-group-item" name="artigianato"> 
        <i class="icon-group"></i> Artigianato 
       </a> 


       <a href="#dovedormire" class="list-group-item" data-parent="#sidebar" name="dovedormire"> 
        <i class="icon-group"></i> Dove Dormire 
        <span class="badge bg_danger">4</span> 
       </a> 

        <div id="dovedormire" class="list-group subitem collapse">  

         <a href="#" class="list-group-item"> 
          <i class="icon-caret-right"></i> Sub 1 
         </a> 

         <a href="#" class="list-group-item"> 
          <i class="icon-caret-right"></i> Sub 2 
         </a> 

         <a href="#" class="list-group-item"> 
          <i class="icon-caret-right"></i> Sub 3 
         </a> 

         <a href="#" class="list-group-item"> 
          <i class="icon-caret-right"></i> Sub 4 
         </a> 

        </div> 

       <a href="#attivita" class="list-group-item" data-parent="#sidebar" name="attivita"> 
        <i class="icon-group"></i> Attività 
        <span class="badge bg_danger">4</span> 
       </a> 

        <div id="attivita" class="list-group subitem collapse">  

         <a href="#" class="list-group-item"> 
          <i class="icon-caret-right"></i> Sub 1 
         </a> 

         <a href="#" class="list-group-item"> 
          <i class="icon-caret-right"></i> Sub 2 
         </a> 

         <a href="#" class="list-group-item"> 
          <i class="icon-caret-right"></i> Sub 3 
         </a> 

         <a href="#" class="list-group-item"> 
          <i class="icon-caret-right"></i> Sub 4 
         </a> 

        </div> 

       <a href="#" class="list-group-item" data-parent="#sidebar" name="meteo"> 
        <i class="icon-group"></i> Meteo 
       </a> 

       <a href="#" class="list-group-item" data-parent="#sidebar" name="numutili"> 
        <i class="icon-group"></i> Numeri Utili 
       </a> 

       <a href="#" class="list-group-item" data-parent="#sidebar" name="trasporti"> 
        <i class="icon-group"></i> Trasporti 
       </a> 

     </div> 

    </div> 

JAVASCRIPT

$(document).ready(function() { 
    $('#contenuti').load('dashboard.php'); 
}); 

$('.list-group-item').click(function(){ 
    var clicked=this; 
    $(".list-group a").each(function() { 
     $(this).removeClass("active"); 
     $(this).next('div').collapse('hide'); 
     if($(this).attr("name")==$(clicked).attr("name")){ 
      $('#contenuti').load($(this).attr("name")+'.php'); 
      $(this).addClass("active"); 
      $(this).next('div').collapse('show'); 
     } 
    }); 

}); 

Answer 1

还有一些造型的问题，但我建议你换的逻辑更是这样的：

的jsfiddle：http://jsfiddle.net/TrueBlueAussie/rc1chhtd/7/

$(document).ready(function() { 
    $('#contenuti').load('dashboard.php'); 

    $('.list-group-item').click(function() { 
     var $clicked = $(this); 
     // Hide any active divs (only) 
     $(".list-group a.active").removeClass("active").next("div").collapse("hide"); 
     // Find the target anchor based on the name attribute in the clicked item 
     var $targeta = $('.list-group a[name="' + $clicked.attr("name") + '"]').addClass("active"); 
     // Load the panel based on the clicked item 
     $('#contenuti').load($(this).attr("name") + '.php'); 
     // then open the clicked div 
     $targeta.next('div').collapse('show'); 
    }); 
}); 

如果有任何你将动态增加项目的机会，单击处理程序更改为连接到非改变的祖先元素委托的事件处理程序- document是默认） ：

$(document).on('click', '.list-group-item', function() { 

更新：似乎有一个错误collapse。如果该项目从未显示/折叠，则调用collapse("hide")似乎将它们切换为打开状态。我将代码更改为只隐藏“活动”链接。