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

Answer 1

你应该像

一样使用停止传播

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

但这并不是一个好的用户体验，令人困惑。我建议你添加箭头＆＃34; - ＆gt;＆＃34;用户点击打开手风琴＆amp;单击标题或复选框时，将切换复选框

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

1 个答案: