在 Bootstrap 手风琴中，我不需要单击文本，而是希望在单击diva中的任何位置时使其折叠。panel-heading
我使用的是 Bootstrap 3。所以它不是手风琴，而是一个可折叠的面板。知道如何使整个面板可点击吗？
问问题
136382 次
7 回答
297
您需要做的就是使用...
data-toggle="collapse"data-target="#ElementToExpandOnClick"
...在要单击以触发折叠/展开效果的元素上。
带有的元素data-toggle="collapse"将是触发效果的元素。该data-target属性表示触发效果时将展开的元素。
您可以选择设置data-parent是否要创建手风琴效果而不是独立可折叠，例如：
data-parent="#accordion"
data-toggle="collapse"如果它们不是<a>标签，我还会将以下 CSS 添加到元素中，例如：
.panel-heading {
cursor: pointer;
}
这是Bootstrap 3 文档中修改后的 html的 jsfiddle。
于 2013-10-08T03:52:24.820 回答
70
另一种方法是让你<a>完全填满panel-heading. 使用此样式执行此操作：
.panel-title a {
display: block;
padding: 10px 15px;
margin: -10px -15px;
}
检查这个演示（http://jsfiddle.net/KbQyx/）。
然后，当您单击标题时，您实际上是在单击<a>.
于 2013-11-25T09:31:29.887 回答
13
我注意到 grim 的 jsfiddle 中有几个小缺陷。
要使指针变为整个面板的手形，请使用：
.panel-heading {
cursor: pointer;
}
我已经删除了<a>标签（一个风格问题）并一直保持data-toggle="collapse" data-parent="#accordion" data-target="#collapse..."不变panel-heading。
我添加了一个 CSS 方法来显示雪佛龙，font-awesome.css在我的 jsfiddle 中使用：
于 2013-10-21T16:11:51.607 回答
8
这是 Bootstrap4 的解决方案。您只需要将card-header类放在a标签中。这是从W3Schools 中的示例修改而来的。
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container">
<div id="accordion">
<div class="card">
<a class="card-link card-header" data-toggle="collapse" href="#collapseOne" >
Collapsible Group Item #1
</a>
<div id="collapseOne" class="collapse" data-parent="#accordion">
<div class="card-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
</div>
<div class="card">
<a class="collapsed card-link card-header" data-toggle="collapse" href="#collapseTwo">
Collapsible Group Item #2
</a>
<div id="collapseTwo" class="collapse" data-parent="#accordion">
<div class="card-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
</div>
<div class="card">
<a class="card-link card-header" data-toggle="collapse" href="#collapseThree">
Collapsible Group Item #3
</a>
<div id="collapseThree" class="collapse" data-parent="#accordion">
<div class="card-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
</div>
</div>
</div>于 2019-07-17T14:00:38.217 回答
5
简单的解决方案是删除填充.panel-heading并添加到.panel-title a.
.panel-heading {
padding: 0;
}
.panel-title a {
display: block;
padding: 10px 15px;
}
此解决方案与上面的calfzhou发布的解决方案类似，略有不同。
于 2017-05-31T02:17:00.260 回答
2
这是 Bootstrap 4.3 的工作示例
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingOne" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<h2 class="mb-0">
<button class="btn btn-link" type="button" >
Collapsible Group Item #1
</button>
</h2>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
<h2 class="mb-0">
<button class="btn btn-link collapsed" type="button" >
Collapsible Group Item #2
</button>
</h2>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
<div class="card-body">
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
<h2 class="mb-0">
<button class="btn btn-link collapsed" type="button" >
Collapsible Group Item #3
</button>
</h2>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
<div class="card-body">
</div>
</div>
</div>
</div>于 2019-11-11T06:28:05.370 回答