如何使自举手风琴折叠时，单击标题 div？

在 Bootstrap 手风琴中，我不需要单击 a文本，而是希望在单击 panel-heading div 中的任何位置时使其折叠。

我正在使用 Bootstrap 3。所以不是手风琴，只是一个可折叠的面板。知道怎么做整个面板可点击吗？

138325 次浏览
小开
最佳答案

你只需要用..。

  • data-toggle="collapse"
  • data-target="#ElementToExpandOnClick"

... 在你想要点击的元素上触发折叠/展开效果。

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

如果你想创建一个手风琴效应而不是独立的可折叠的，你可以选择设置 data-parent，例如:

  • data-parent="#accordion"

如果这些元素不是 <a>标签，我也会用 data-toggle="collapse"将下面的 CSS 添加到这些元素中，例如:

.panel-heading {
cursor: pointer;
}

下面是 小提琴和来自 Bootstrap 3文档的修改后的 html。

小开

我注意到格里姆的小提琴有几处小瑕疵。

要让指针变成一只手，整个面板使用:

.panel-heading {
cursor: pointer;
}

我已经删除了 <a>标签(一个样式问题) ，并且始终将 data-toggle="collapse" data-parent="#accordion" data-target="#collapse..."保留在 panel-heading上。

我在 jsfiddle 中使用 font-awesome.css添加了一个用于显示人字符的 CSS 方法:

Http://jsfiddle.net/weaversnap/7fqsx/1/

小开

另一种方法是让你的 <a>充分填满 panel-heading的所有空间。使用这种风格来做到这一点:

.panel-title a {
display: block;
padding: 10px 15px;
margin: -10px -15px;
}

检查这个演示(http://jsfiddle.net/KbQyx/)。

然后当你点击标题时，你实际上是在点击 <a>。

小开

事实上，我的面板有 这个折叠状态箭头图标，我尝试在这篇文章的其他答案，但图标位置改变，所以这里是 具有折叠状态箭头图标的解决方案。

添加此自定义 CSS

 .panel-heading
{
cursor: pointer;
padding: 0;
}


a.accordion-toggle
{
display: block;
padding: 10px  15px;
}

信用归于 这个邮件答录机。

希望有用。

小开

简单的解决方案是从 .panel-heading删除填充，并添加到 .panel-title a。

.panel-heading {
padding: 0;
}
.panel-title a {
display: block;
padding: 10px 15px;
}

这个解决方案类似于 Calfzhou发布的上述解决方案，只是略有不同。

小开

这是 Bootstrap4的一个解决方案。您只需要将 card-header类放在 a标记中。这是从 W3学校的例子修改过来的。

<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>

小开

下面是 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>


提交答案