点击标题div时如何使Bootstrap手风琴折叠？

在Bootstrap手风琴中，我不想点击文本，而是点击panel-heading div中的任意位置。

我正在使用Bootstrap 3.所以，而不是手风琴，它只是一个可折叠的面板。任何想法如何做整个面板点击？

所有你需要做的就是使用…

…您要点击的元素触发折叠/展开效果。

data-toggle="collapse"元素将是触发效果的元素。 data-target属性指示当效果被触发时将会展开的元素。

如果你想创build一个手风琴效果而不是独立的可折叠的，你可以select设置data-parent ，例如：

如果它们不是<a>标记，我还会将以下CSS添加到data-toggle="collapse"的元素中，例如：

 .panel-heading { cursor: pointer; }

这里有一个从Bootstrap 3文档中修改html 的jsfiddle 。

另一种方法是让你的<a>完整填充panel-heading所有空间。使用这种风格来做到这一点：

 .panel-title a { display: block; padding: 10px 15px; margin: -10px -15px; }

检查这个演示（ http://jsfiddle.net/KbQyx/ ）。

然后当你点击标题时，你实际上点击了<a> 。

我注意到了一些严峻的小错误。

为了让指针变成整个面板的使用手：

 .panel-heading { cursor: pointer; }

我在整个panel-heading中删除了<a>标签（一个样式问题）并保留了data-toggle="collapse" data-parent="#accordion" data-target="#collapse..." 。

我已经添加了CSS方法来显示V形，在我的jsfiddle中使用font-awesome.css awesome.css：

简单的解决办法是从.panel-heading删除填充，并添加到.panel-title a 。

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

这个解决scheme类似于上面贴的一个小牛，略有不同。

其实我的面板有这个崩溃状态的箭头图标，我试着在这篇文章中的其他答案，但图标的位置改变，所以这里是崩溃状态箭头图标的解决scheme 。

添加这个自定义的CSS

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

信贷的去这个职位回答。

希望有帮助。