.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")似乎將它們切換爲打開狀態。我將代碼更改爲只隱藏「活動」鏈接。