Question

我正在为商店中提供的相关产品提供以下代码。我希望在崩溃事件中获得id div。但是从代码中我在折叠嵌套列表时得到两个触发结果。

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 上输出=＆GT;

id:collapse1

在相关产品上输出=＆GT;

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面板折叠事件不止一次触发

1 个答案: