手风琴活动中的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手风琴

回答

相关问题