Twitter Bootstrap - 从 Accordion Collapse 中排除元素答案

【问题标题】：Twitter Bootstrap - Excluding element from Accordion CollapseTwitter Bootstrap - 从 Accordion Collapse 中排除元素
【发布时间】：2014-11-26 23:33:30
【问题描述】：

我有一个手风琴，我想在单击标题中的任意位置时折叠面板，而不是触发折叠的标题。但是我在标题中有一个具有自己用途的复选框，它将选择刚刚打开的面板中的所有元素。我现在设置的方式，单击复选框将触发面板折叠。有没有办法将面板设置为在单击标题中的任意位置时切换，但特别排除单击复选框？

 <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 属性，但这也不起作用。

引导小提琴：http://www.bootply.com/PyzEBFPfBN

【问题讨论】：

标签： html css twitter-bootstrap accordion

【解决方案1】：

你应该像停止传播一样使用

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

但这并不是一个很好的用户体验，它令人困惑。我建议您添加箭头“->”，用户单击以打开手风琴，当单击标题或复选框时，复选框将被切换

【讨论】：