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

2018-06-12 19:33:44

在引导手风琴，而不需要在点击a文本，我想在任何地方的点击，当它崩溃panel-heading股利。

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

您只需要使用...

data-toggle="collapse"

data-target="#ElementToExpandOnClick"

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

data-toggle="collapse"的元素将是触发效果的元素。 data-target属性表示在触发效果时将展开的元素。

或者，如果您要创建手风琴效果而不是独立可折叠效果，则可以设置data-parent ，例如：

data-parent="#accordion"

如果它们不是<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> 。

我注意到了严峻的jsfiddle中的一些小缺陷。

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

.panel-heading {
   cursor: pointer;
}

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

我已经添加了一个CSS方法来显示雪佛龙，在我的jsfiddle中使用font-awesome.css awesome.css：

http://jsfiddle.net/weaversnap/7FqsX/1/

链接地址: http://www.djcxy.com/p/36611.html