Bootstrap panel-collapse 事件触发不止一次

Question

我还为商店中的相关产品提供了以下代码。我想获得 div 的 id on collapse 事件。但是在折叠嵌套列表时，我从代码中得到了两个触发结果。

HTML

<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
    <font style="color: black;"><b>Product List</b></font>
</a>
<div id="collapse1" class="panel-collapse collapse in">
<div class="accordion">
    <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">  
        <b>Product1</b>
    </a>
</div>          
<div id="collapse2" class="panel-collapse collapse in">
       Product1 Description
        <br/>
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">
                <b>Related Products</b>
        </a>                                                            
        <div id="collapse3" class="panel-collapse collapse in">                     
               Related Product2 
               <br/>Related Product3                                                                
        </div>
    </div>
</div>

javascript

$('.collapse').on('show.bs.collapse', function (e) {
    if ($(this).hasClass("in")) {
        console.log('id:'+e.currentTarget.id);
    }                           
})

当我得到以下结果时：在 Product1 输出=>

id:collapse1

关于相关产品 输出=>

id:collapse2
id:collapse1

我如何从第二个结果（仅id: collapse2）中获得单个结果，因为它显示了两个触发结果。我是不是哪里做错了？

Answer 1

我已经解决了这个问题。我修改了 js 事件函数如下，即使它不需要任何 $(this).hasClass("in") 检查。

$(document).on('show.bs.collapse', function (e) {        
    console.log('id:'+e.target.id);                                   
})

Bootstrap panel-collapse 事件触发不止一次

Bootstrap panel-collapse event triggers more than once

collapse

twitter-bootstrap