twitter-bootstrap 单击标题 div 时如何使 Bootstrap 手风琴折叠？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19236717/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make a Bootstrap accordion collapse when clicking the header div?
提问by 9blue
In a Bootstrap accordion, instead of requiring a click on the atext, I want to make it collapse when clicking anywhere in the panel-headingdiv.
在 Bootstrap 手风琴中，a我希望在单击panel-headingdiv 中的任意位置时使其折叠，而不是需要单击文本。
I am using Bootstrap 3. So instead of accordion, it's just a collapsible panel. Any idea how to do the entire panel clickable?
我正在使用 Bootstrap 3。所以它不是手风琴，而是一个可折叠的面板。知道如何使整个面板可点击吗？
回答by grim
All you need to do is to to use...
您需要做的就是使用...
data-toggle="collapse"data-target="#ElementToExpandOnClick"
data-toggle="collapse"data-target="#ElementToExpandOnClick"
...on the element you want to click to trigger the collapse/expand effect.
...在您要单击以触发折叠/展开效果的元素上。
The element with data-toggle="collapse"will be the element to trigger the effect.
The data-targetattribute indicates the element that will expand when the effect is triggered.
元素 withdata-toggle="collapse"将是触发效果的元素。该data-target属性表示触发效果时将展开的元素。
Optionally you can set the data-parentif you want to create an accordion effect instead of independent collapsible, e.g.:
您可以选择设置data-parent是否要创建手风琴效果而不是独立可折叠，例如：
data-parent="#accordion"
data-parent="#accordion"
I would also add the following CSS to the elements with data-toggle="collapse"if they aren't <a>tags, e.g.:
data-toggle="collapse"如果它们不是<a>标签，我还会将以下 CSS 添加到元素中，例如：
.panel-heading {
cursor: pointer;
}
Here's a jsfiddlewith the modified html from the Bootstrap 3 documentation.
这是一个 jsfiddle，其中包含来自Bootstrap 3 文档的修改后的 html 。
回答by calfzhou
Another way is make your <a>full fill all the space of the panel-heading. Use this style to do so:
另一种方法是让你<a>完全填满panel-heading. 使用这种风格来做到这一点：
.panel-title a {
display: block;
padding: 10px 15px;
margin: -10px -15px;
}
Check this demo (http://jsfiddle.net/KbQyx/).
检查这个演示（http://jsfiddle.net/KbQyx/）。
Then when you clicking on the heading, you are actually clicking on the <a>.
然后，当您单击标题时，您实际上是在单击<a>.
回答by WeaverSnap
I've noticed a couple of minor flaws in grim's jsfiddle.
我注意到 grim 的 jsfiddle 中有几个小缺陷。
To get the pointer to change to a hand for the whole of the panel use:
要将指针更改为整个面板的手，请使用：
.panel-heading {
cursor: pointer;
}
I've removed the <a>tag (a style issue) and kept data-toggle="collapse" data-parent="#accordion" data-target="#collapse..."on panel-headingthroughout.
我已经删除了<a>标签（一个风格问题），并保持data-toggle="collapse" data-parent="#accordion" data-target="#collapse..."在panel-heading贯穿始终。
I've added a CSS method for displaying chevron, using font-awesome.cssin my jsfiddle:
我添加了一个用于显示 V 形的 CSS 方法，font-awesome.css在我的 jsfiddle 中使用：
回答by Rhythm Ruparelia
Simple solution would be to remove padding from .panel-headingand add to .panel-title a.
简单的解决办法是移除填充.panel-heading，并加入到.panel-title a。
.panel-heading {
padding: 0;
}
.panel-title a {
display: block;
padding: 10px 15px;
}
This solution is similar to the above one posted by calfzhou, slightly different.
回答by user2233706
Here's a solution for Bootstrap4. You just need to put the card-headerclass in the atag. This is a modified from an example in W3Schools.
这是 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>回答by shaijut
Actually my panel had thiscollapse state arrow icon and I tried other answers in this post , but icon position changed, so here is the solution with collapse state arrow icon.
实际上我的面板有这个折叠状态箭头图标，我在这篇文章中尝试了其他答案，但图标位置改变了，所以这里是带有折叠状态箭头图标的解决方案。
Add this Custom CSS
添加此自定义 CSS
.panel-heading
{
cursor: pointer;
padding: 0;
}
a.accordion-toggle
{
display: block;
padding: 10px 15px;
}
Credit's goes to thispost answerer.
信贷公司的进入这个帖子回答者。
Hope helps.
希望有所帮助。
回答by Developer
Here is the working example for Bootstrap 4.3
这是 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>