如何在单击标题div时使Bootstrap折叠？
如何在单击标题div时使Bootstrap折叠？
提问于 2013-10-08 07:46:09
在Bootstrap accordion中，我不需要单击a文本，而是希望在单击panel-heading div中的任意位置时将其折叠。
我用的是Bootstrap 3，所以它不是手风琴，而是一个可折叠的面板。你知道怎么做整个面板可点击吗？
回答 5
Stack Overflow用户
发布于 2013-11-25 17:31:30
另一种方法是让你的<a>填满panel-heading的所有空间。使用此样式可执行以下操作：
.panel-title a {
display: block;
padding: 10px 15px;
margin: -10px -15px;
}查看此演示(http://jsfiddle.net/KbQyx/)。
然后，当你点击标题时，你实际上是在点击<a>。
Stack Overflow用户
发布于 2013-10-22 00:11:52
我注意到grim的jsfiddle中有几个小缺陷。
要使指针在整个面板中变为手形，请使用：
.panel-heading {
cursor: pointer;
}我去掉了<a>标签(这是一个风格问题)，并始终将data-toggle="collapse" data-parent="#accordion" data-target="#collapse..."放在panel-heading上。
我在我的jsfiddle中使用font-awesome.css添加了一个显示人字形的CSS方法：
Stack Overflow用户
发布于 2019-07-17 22:00:38
这里有一个针对Bootstrap4的解决方案。您只需要将card-header类放在a标记中。这是对example in 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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/19236717
复制相关文章
相似问题