.collapse() 나는 다음과 같은 코드로 이상한 문제를했습니다

Question

처음으로 HREF를 클릭하면 오류 : http://jsfiddle.net/rc1chhtd/4/ 실제로

, 링크를 클릭 할 때 처음으로, 붕괴의 방법은 각각의 호출을 div가 아닌 마지막 div. 그러면 모든 것이 완벽하게 작동합니다. 어떤 힌트?

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")을 호출하면 해당 항목이 열리고 해제됩니다. "활성"링크 만 숨기도록 코드를 변경했습니다.