在Bootstrap accordion中,我不需要单击a
文本,而是希望在单击panel-heading
div中的任意位置时将其折叠。
我用的是Bootstrap 3,所以它不是手风琴,而是一个可折叠的面板。你知道怎么做整个面板可点击吗?
发布于 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>
。
发布于 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方法:
发布于 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>
https://stackoverflow.com/questions/19236717
复制相似问题