单击标题 div 时如何使 Bootstrap 手风琴折叠? [英] How to make a Bootstrap accordion collapse when clicking the header div?

问题描述

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

我使用的是 Bootstrap 3.所以它不是手风琴，而是一个可折叠的面板.知道如何使整个面板可点击吗?

解决方案

您需要做的就是使用...

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

...在您要单击以触发折叠/展开效果的元素上.

带有 data-toggle="collapse" 的元素将是触发效果的元素.data-target 属性表示触发效果时会展开的元素.

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

• data-parent="#accordion"

如果它们不是 <a> 标记，我还会将以下 CSS 添加到带有 data-toggle="collapse" 的元素中，例如:

.panel-heading {光标:指针；}

这是 一个 jsfiddle，带有来自 Bootstrap 3 文档.

In a Bootstrap accordion, instead of requiring a click on the a text, I want to make it collapse when clicking anywhere in the panel-heading div.

I am using Bootstrap 3. So instead of accordion, it's just a collapsible panel. Any idea how to do the entire panel clickable?

解决方案

All you need to do is to to use...

• 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-target attribute indicates the element that will expand when the effect is triggered.

Optionally you can set the data-parent if you want to create an accordion effect instead of independent collapsible, e.g.:

• 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.:

.panel-heading {
    cursor: pointer;
}

Here's a jsfiddle with the modified html from the Bootstrap 3 documentation.

这篇关于单击标题 div 时如何使 Bootstrap 手风琴折叠?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！