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

Question

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

Answer 1

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

使用一些 JQuery，例如：

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

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

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

Answer 2

您必须将复选框放在手风琴切换之外但在手风琴标题类内，即

<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; }