单击标题div时如何使Bootstrap手风琴折叠？

Question

在Bootstrap手风琴中,a我想要点击panel-headingdiv中的任何地方,而不是要求点击文本.

我正在使用Bootstrap 3.因此,它不仅仅是手风琴,而是一个可折叠的面板.知道怎么做整个面板可点击吗？

Answer 1

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

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

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

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

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

• data-parent="#accordion"

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

.panel-heading {
    cursor: pointer;
}

这是来自Bootstrap 3文档的修改后的html 的jsfiddle.

Answer 2

另一种方法是让你<a>充分填补所有的空间panel-heading.使用此样式可以执行此操作:

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

查看此演示(http://jsfiddle.net/KbQyx/).

然后,当您单击标题时,您实际上是单击该标题<a>.

Answer 3

我注意到了严峻的jsfiddle中的一些小缺陷.

要使指针更改为整个面板使用的手:

.panel-heading {
   cursor: pointer;
}

我已经删除了<a>标签(一个风格问题),并保持data-toggle="collapse" data-parent="#accordion" data-target="#collapse..."在panel-heading贯穿始终.

我已经添加了一个用于显示雪佛龙的CSS方法,font-awesome.css在我的jsfiddle中使用:

http://jsfiddle.net/weaversnap/7FqsX/1/

Answer 4

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

Answer 5

简单的解决办法是移除填充.panel-heading，并加入到.panel-title a。

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

这个解决方案与上面calfzhou发布的类似，略有不同。