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

167

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

我正在使用Bootstrap3。因此，它不是可折叠面板，而是可折叠面板。知道如何使整个面板可点击吗？

twitter-bootstrap  twitter-bootstrap-3 
— 9蓝色
source
好吧，你得到了答案。但是，此链接将帮助您找到不同样式的Bootstrap手风琴菜单designerlib.com/bootstrap-accordion-menu
— Karuppiah RK

Answers:

292

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

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

— 严峻
source
11
似乎这样应该是默认/演示代码。比使用<a>好得多。
— dbn 2014年
此方法不适用于iPhone。根据stackoverflow.com/questions/19866172/…的答案，为了使其可在iphone上折叠，它必须为<a>（因为它需要href）...有什么想法吗？
— minovsky 2014年
2
@minovsky此更新的JSFiddle如何：jsfiddle.net/Tcgyx/60？不幸的是，我没有要测试的iPhone。如果可以的话，我将更新我的答案。
— 严峻的2014年
@grim感谢您的小提琴！它并不总是有效，但是让我做更多的实验，弄清楚是否可以可靠地产生故障。
— minovsky 2014年
1
@wutzebaer您可能会有role="tab button"，浏览器将解释它理解的列表中的第一个（很可能是tab）。不过，我不确定两者中哪一个更好。尝试查找tab和button角色的含义，这将为您提供选择答案。
— 严峻
67

另一种方法是让您<a>充分利用的所有空间panel-heading。使用此样式可以这样做：

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

检查此演示（http://jsfiddle.net/KbQyx/）。

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

— 小牛州
source
使用GWTBootstrap库为我们这些人提供了一个很好的解决方案。
— 2014年
在实施类似的解决方案之前，我没有看到这一点。CSS更改对我来说是侵入性最小的更改。我选择display：inline-block，width：100％，由于我们使用Glyphicons，因此a：before具有margin-left：-10px和margin-right：10px。
— Kirk Liemohn 2014年
1
此方法在iOS设备上不起作用，这在使用Bootstrap时通常是首要考虑的问题。
— Jared 2014年
贾里德，您能详细说说吗？为什么这不适用于某些Safari版本？
— Jan-Philip Gehrcke博士2015年
1
此方法的优点是，它也适用于AngularJS的Boostrap UI（不需要/不需要Bootstrap的JS）。
— Jan-Philip Gehrcke博士2015年
12

我注意到grim的jsfiddle有一些小缺陷。

要使指针变为整个面板的指针，请使用：

.panel-heading {
   cursor: pointer;
}

我已经删除了<a>标签（样式问题）并继续data-toggle="collapse" data-parent="#accordion" data-target="#collapse..."进行panel-heading。

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

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

— WeaverSnap
source
这几乎可行。当页面加载时，人字形显示为上下颠倒，并且在展开和折叠其中一个面板后进行校正。
— 康妮·德辛科
@ConnieDeCinko更改panel-heading为panel-heading collapsed固定颠倒的V形。
— 艾米·巴雷特
5

这是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>
展开摘要

— 用户名
source
4

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

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

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

— 节奏木兰
source
1

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

添加此自定义CSS

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

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

信贷公司的进入这个帖子回答者。

希望会有所帮助。

— Shaijut
source
0

这是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>
展开摘要

— 开发者
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.