尝试在 Bootstrap Accordion header 中添加 Select 标签，但无法停止传播

Question

我正在尝试在 bootstrap 手风琴标头中添加 Select 标记，但是当我尝试从 select Tag 手风琴切换中选择选项时，当我添加停止传播以通过 jQuery 选择时，它无法按预期工作。 我们可以在 Accordion header 中使用 Select 吗？如果是，我们该如何处理？

<div class="panel-group BDAccordion" id="accordion" role="tablist" aria-multiselectable="true">
     <div class="panel panel-default">
    <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne" class="panel-heading row" role="tab" id="headingOne">
        <div class="col-md-4 col-sm-6 col-xs-4">
            <input type="checkbox" aria-label="..." class="form-control col-sm-1">
        </div>
        <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="1">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>  
    </a>
    </div>
</div>

$("select").click(function(event){
                event.stopPropagation();
            });

Answer 1

我不确定这是否可行，但您可以尝试添加事件。stopImmediatePropagation() 像这样：

$("select").click(function(event){
   event.stopPropagation();
   event.stopImmediatePropagation();
});

根据作者评论编辑：

首先，我认为您应该在问题中添加一些信息，例如 Bootstrap 版本。我的建议是至少将它更新到 3.4.1v（并正确格式化您的代码）。顺便说一句，这是根据您的要求制作的小提琴：http://jsfiddle.net/tooMuchLagWillKillYou/kbjq0d4t/6/

您的代码操作系统中的问题是您将选择标签放在锚点内，该锚点负责手风琴的打开和关闭（具有属性 data-toggle="collapse" 的那个）。基本上你只需要将选择作为那个锚点的兄弟姐妹，你应该没问题。