手風琴活動中的Bootstrap手風琴

我在另一個手風琴裏有一個手風琴，我正在嘗試處理內部手風琴的表演/隱藏事件。手風琴活動中的Bootstrap手風琴

問題是，當我展開內部手風琴時，有兩個事件被觸發，一個是內部手風琴，一個是外部手風琴。是否有可能在另一個手風琴裏放置手風琴，當我點擊內部手風琴時只有內部手風琴被解僱的事件？

這裏是我的代碼

<div class="panel-group" id="accordion1"> 
      <div class="panel panel-default"> 
      <div class="panel-heading"> 
       <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion1" href="#collapseOne"> 
       Collapsible Group #1 
       </a></h4> 
      </div> 
      <div id="collapseOne" class="panel-collapse collapse"> 
       <div class="panel-body"> 
       This is a simple accordion inner content... 
       </div> 
      </div> 
      </div> 
      <div class="panel panel-default"> 
      <div class="panel-heading"> 
       <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion1" href="#collapseTwo"> 
       Collapsible Group #2 (With nested accordion inside) 
       </a></h4> 
      </div> 
      <div id="collapseTwo" class="panel-collapse collapse"> 
       <div class="panel-body"> 

       <!-- Here we insert another nested accordion --> 

       <div class="panel-group" id="accordion2"> 
        <div class="panel panel-default"> 
        <div class="panel-heading"> 
         <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion2" href="#collapseInnerOne"> 
         Collapsible Inner Group Item #1 
         </a></h4> 
        </div> 
        <div id="collapseInnerOne" class="panel-collapse collapse"> 
         <div class="panel-body"> 
         Anim pariatur cliche... 
         </div> 
        </div> 
        </div> 
        <div class="panel panel-default"> 
        <div class="panel-heading"> 
         <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion2" href="#collapseInnerTwo"> 
         Collapsible Inner Group Item #2 
         </a></h4> 
        </div> 
        <div id="collapseInnerTwo" class="panel-collapse collapse"> 
         <div class="panel-body"> 
         Anim pariatur cliche... 
         </div> 
        </div> 
        </div> 
       </div> 

       <!-- Inner accordion ends here --> 

       </div> 
      </div> 
      </div> 
     </div> 


     <script> 
      $(document).ready(function() { 

       $('.collapse').on('show.bs.collapse', function (e) { 
        alert('show' + $(this).attr('id')); 
       }); 

       $('.collapse').on('hide.bs.collapse', function (e) { 
        alert('hide' + $(this).attr('id')); 
       }); 

      }); 
     </script>

來源

2015-11-22 Panagiotis Drakontis

太多時間尋找我找到了解決辦法

後一個例子，我們需要添加： event.stopPropagation（）;

$('.collapse').on('show.bs.collapse', function (e) { 
     event.stopPropagation(); 
     alert('show' + $(this).attr('id')); 
    });

來源

2015-11-22 18:24:00

我覺得你有問題，因爲你正在使用class .container作爲選擇器。如果您使用accorddion的id，則不需要使用stopPropagation（），因爲事件不相同。

$("#collapseOne").on('show.bs.collapse', function (e) { 
    alert('show' + $(this).attr('id')); 
}); 

$("#collapseTwo").on('show.bs.collapse', function (e) { 
    alert('show' + $(this).attr('id')); 
});

希望能幫助！

來源

2015-11-22 18:30:46

手風琴活動中的Bootstrap手風琴

回答

相關問題