在Bootstrap Accordion头部添加Select标签，如何解决事件冒泡问题？

可以在Bootstrap Accordion的头部使用Select标签，你遇到的问题是因为点击Select选项时事件冒泡到了触发折叠的<a>父元素，仅给Select绑定stopPropagation无效——浏览器生成的下拉选项不在原Select节点内，事件还是会向上冒泡。以下是两种可行的解决方式：

方法一：拆分触发折叠的区域 #

将原来绑定折叠触发逻辑的整个<a>标签拆分为两部分：仅让需要触发折叠的区域绑定折叠事件，包含Select的区域不绑定，这样点击Select时不会触发折叠。

修改后的HTML结构：

<div class="panel-group BDAccordion" id="accordion" role="tablist" aria-multiselectable="true">
    <div class="panel panel-default">
        <div class="panel-heading row" role="tab" id="headingOne">
            <!-- 仅该区域触发折叠 -->
            <div class="col-md-4 col-sm-6 col-xs-4" 
                 role="button" 
                 data-toggle="collapse" 
                 data-parent="#accordion" 
                 href="#collapseOne" 
                 aria-expanded="true" 
                 aria-controls="collapseOne">
                <input type="checkbox" aria-label="..." class="form-control col-sm-1">
            </div>
            <!-- 包含Select的区域，无折叠触发逻辑 -->
            <div class="col-md-4 col-sm-12 col-xs-12 col-md-pull-4">
                <div class="activitySelect">
                    <div class="form-group">
                        <select class="form-control">
                            <option value=""></option>
                            <option value="1">1</option>
                            <option value="2">2</option>
                        </select>
                        <label>Select Activity</label>
                        <span class="error-message">
                            <span class="glyphicon glyphicon-exclamation-sign"></span>Please Choose Option
                        </span>
                    </div>
                </div>
            </div>
        </div>
        <!-- 折叠内容区域 -->
        <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
            <div class="panel-body">
                这里是折叠面板的内容
            </div>
        </div>
    </div>
</div>

方法二：阻止Select区域的事件冒泡 #

如果不想修改原有HTML结构，可通过绑定mousedown和click事件，阻止Select所在容器的事件冒泡，覆盖下拉选项的触发场景：

修改后的JavaScript代码：

// 给Select的父容器绑定事件，阻止事件冒泡到折叠触发元素
$(".activitySelect").on("mousedown click", function(event) {
    event.stopPropagation();
});

原理：浏览器的下拉选项点击会触发mousedown事件，仅绑定click无法覆盖所有场景，同时给父容器绑定事件可确保Select及其下拉选项的事件都被阻止冒泡。

内容的提问来源于stack exchange，提问作者P Jaju