在 Bootstrap 手风琴标题中有一个可点击的元素答案

【问题标题】：Having a clickable element in a Bootstrap accordion header在 Bootstrap 手风琴标题中有一个可点击的元素
【发布时间】：2012-09-17 05:35:12
【问题描述】：

我正在尝试使用手风琴并在标题内有一个复选框。但是，当我单击手风琴标题中的复选框时，它会折叠或展开手风琴。有没有办法在没有手风琴展开/折叠的情况下单击复选框？

【问题讨论】：

尝试添加这个css：.accordion-heading a.accordion-toggle { display: inline-block; }
啊，谢谢！我移动了我的复选框，现在它就是我想要的。
能否请您发布一些代码。我无法让它工作。

标签： javascript html css twitter-bootstrap

【解决方案1】：

点击会冒泡到手风琴标题，因此另一种可能性（除了按照其他人的建议将复选框移动到切换之外）是停止冒泡。

使用一些 JQuery，例如：

$("input[type=checkbox]").on("click", function(event) {
    event.stopPropagation();
});

或使用更短的复选框选择器：

$(":checkbox").on("click", function(event) {
    event.stopPropagation();
});

【讨论】：

是否有角度的方式来做同样的事情？
我来晚了，不过有办法：ng-click="$event.stopPropagation()"

【解决方案2】：

您必须将 checkbox 放在 accordion-toggle 之外，但放在 accordion-heading 类中，即，

<div class="accordion-heading">
    <input type="checkbox" name="box"/>
    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordionParent" href="#collapseone">
        <p>Heading1</p>
    </a>
</div>

并添加 css .accordion-heading a.accordion-toggle { display: inline-block; }

【讨论】：