Twitter Bootstrap - 从手风琴折叠中排除元素

Question

我有一个手风琴，希望能够在标题栏的任何位置点击时折叠面板，而不是仅在标题上触发折叠。但是，标题中有一个复选框，它有自己的用途，它将选择刚打开的面板中的所有元素。现在，我设置的方式是，单击复选框会触发面板折叠。是否有一种方法可以设置面板，在标题的任何位置点击时切换，但明确排除对复选框的点击？

 <div class="panel panel-default">
                        <div class="panel-heading" data-toggle="collapse" href="#group-title">
                          <h4 class="panel-title">
                            <input type="checkbox" name="group-title" class="group-checkbox"> <a data-toggle="collapse" href="#group-title">
                              charity-group-title
                            </a>
                          </h4>
                        </div>
                        <div id="group-title" class="panel-collapse collapse">
                          <div class="panel-body">
                            <div class="row-fluid">

                                <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 group-title-orgs">
                                    <input type="checkbox" name="charity-id" class="flatten link group-title"> <div data-toggle="collapse" data-target="#org-id" class="flatten link">
                                              org-id-name
                                            </div>

                                            <div id="org-id" class="collapse">org-id-info</div>
                                        </div>

                                    </div>
                          </div>
                        </div>
                      </div>

jQuery中的stopPropagation与之有关吗?

编辑：我尝试调用jQuery的.click()方法并从复选框中删除data-toggle属性，但这也没有起作用。

Bootstrap示例：http://www.bootply.com/PyzEBFPfBN

- Jared

Answer 1

您应该像这样使用停止传播：

$('.panel-title input[type="checkbox"]').click( function (e) {
    e.stopPropagation()
});

但那并不是一个好的用户体验，这样会让人感到困惑。我建议您添加箭头“->”，让用户点击它来打开手风琴，并且在点击标题或复选框时切换复选框。

- Basemm