Question

在Bootstrap手风琴中，我不想点击a文字，而是想点击panel-heading div中的任何位置时崩溃。

我正在使用Bootstrap 3.因此，它不是手风琴，而是一个可折叠的面板。知道如何整个面板可点击吗？

Answer 1

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

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

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

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

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

data-parent="#accordion"

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

.panel-heading {
    cursor: pointer;
}

以下a jsfiddle来自Bootstrap 3 documentation修改后的html。

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。

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

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

Answer 4

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

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

此解决方案类似于calfzhou发布的上述解决方案，略有不同。

Answer 5

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

添加此自定义CSS

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

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

信用卡转到this帖子回答者。

希望有所帮助。

Answer 6

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

Answer 7

这是Bootstrap 4.3的工作示例

public AbstractServerConnectionFactory serverConnectionFactory(int port) {
    final AbstractServerConnectionFactory connectionFactory = new TcpNetServerConnectionFactory(port);
    connectionFactory.setSerializer(customDeserializer);
    connectionFactory.setDeserializer(customDeserializer);
    connectionFactory.setSoKeepAlive(false);
    // connectionFactory.setSoTimeout(timeout);
    return connectionFactory;
}

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

7 个答案: