Bootstrap 通过单击标题使手风琴折叠？答案

【问题标题】：Bootstrap make accordion collapse by clicking heading?Bootstrap 通过单击标题使手风琴折叠？
【发布时间】：2014-06-04 04:25:34
【问题描述】：

如何让我的手风琴在单击标题后折叠，而不仅仅是标题中的文本？现在只有当我点击“Major”时它才会崩溃。

JSFiddle：http://jsfiddle.net/P63pp/

我的手风琴html：

<div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="accordian" href="#collapseMajor">
                    Major
                </a>
            </h4>
        </div>
        <div id="collapseMajor" class="panel-collapse collapse in">
            <div class="panel-body">
                <div class="checkbox">
                    <label>
                        <input type="checkbox" id="All" title="major" class="check-all-majors" checked>
                            All Majors
                    </label>
                </div>
                <div class="checkbox-group">
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" id="AFM" title="major" class="check-majors" checked>AFM
                        </label>
                    </div>
                <div class="checkbox">
                    <label>
                        <input type="checkbox" id="ARTS" title="major" class="check-majors" checked>ARTS
                    </label>
                </div>
                <div class="checkbox">
                    <label>
                        <input type="checkbox" id="CHEM" title="major" class="check-majors" checked>CHEM
                    </label>
                </div>
            </div>
        </div>
    </div>
</div>

【问题讨论】：

标签： javascript jquery html twitter-bootstrap

【解决方案1】：

感谢 dfsq！如果您删除标签，下划线行为就会消失 - 效果会更好！

我还将其他属性移至面板标题 div - 远离引导示例代码为您提供的标签。这使得面板标题的行为方式与旧的方式相同......

<div class="panel-heading" role="tab" id="headingOne" data-target="#collapseOne" data-toggle="collapse" data-parent="#accordion">
    <h4 class="panel-title">Collapsable Group Item #1</h4>
</div>

我在页面上添加了一些 CSS 来改变光标：

    <style> .panel-heading { cursor: pointer; } </style>

【讨论】：

【解决方案2】：

您需要将a 标记设为块元素并应用面板标题填充a。您可以创建一个panel-accordion 面板并将其用于所有手风琴面板。 Demo.

.panel-accordion .panel-heading
{
    padding: 0;
}

.panel-accordion .panel-heading a
{
    display: block;
    padding: 10px 15px;
}

【讨论】：

这也适用于 AngularJS 的 Bootstrap UI。我没有尝试 data-toggle 方法，但我想这在这种情况下不起作用。

【解决方案3】：

你可以稍微改变一下 HTML：

<div class="panel-heading" data-toggle="collapse" data-target="#collapseMajor">
    <h4 class="panel-title">
        <a href="#collapseMajor">Major</a>
    </h4>
</div>

所以只需将data-toggle="collapse" data-target="#collapseMajor" 添加到.panel-heading div。

演示：http://jsfiddle.net/P63pp/1/

【讨论】：