单击整个 header div 时如何使 Bootstrap v4 手风琴折叠？

Question

最初，bootstrapv4 手风琴在单击具有文本的区域时是可折叠的。我怎样才能让它折叠到 div.

的整个区域

这里是bootstrap的代码。

<div id="accordion" role="tablist" aria-multiselectable="true">
  <div class="card">
    <div class="card-header" role="tab" id="headingOne">
      <h5 class="mb-0">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h5>
    </div>

    <div id="collapseOne" class="collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="card-block">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" role="tab" id="headingTwo">
      <h5 class="mb-0">
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h5>
    </div>
    <div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="card-block">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
      </div>
    </div>
  </div>
</div>

Answer 1

将此样式添加到您的 css

.mb-0 > a {
  display: inline-block;
  width: 100%;
  padding:0.75rem 1.25rem;
}
.card-header {
  padding:0;
}

尝试使用演示，运行片段并单击全屏视图

.mb-0 > a {
  display: inline-block;
  width: 100%;
  padding:0.75rem 1.25rem;
}
.card-header {
  padding:0;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha256-LA89z+k9fjgMKQ/kq4OO2Mrf8VltYml/VES+Rg0fh20=" crossorigin="anonymous">
<style>

.mb-0 > a {
  display: inline-block;
  width: 100%;
  padding:0.75rem 1.25rem;
}
.card-header {
  padding:0;
}

</style>
<div id="accordion" role="tablist" aria-multiselectable="true">
  <div class="card">
    <div class="card-header" role="tab" id="headingOne">
      <h5 class="mb-0">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h5>
    </div>

    <div id="collapseOne" class="collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="card-block">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" role="tab" id="headingTwo">
      <h5 class="mb-0">
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h5>
    </div>
    <div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="card-block">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
      </div>
    </div>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha256-5+02zu5UULQkO7w1GIr6vftCgMfFdZcAHeDtFnKZsBs=" crossorigin="anonymous"></script>

Answer 2

只是更改锚点顺序，我还没有找到其他简单的解决方案。

请注意，bootstrap 的 v4 目前处于 alpha 版本中，此时出现一些奇怪的脚本错误。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>



<div id="accordion" role="tablist" aria-multiselectable="true">
  <div class="card">
  <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
    <div class="card-header" role="tab" id="headingOne" >
      <h5 class="mb-0">
        
          Collapsible Group Item #1
        
      </h5>
    </div>
</a>
    <div id="collapseOne" class="collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="card-block">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
      </div>
    </div>
  </div>
  <div class="card">
      <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
    <div class="card-header" role="tab" id="headingTwo" data-toggle="collapse" data-parent="#accordion">
      <h5 class="mb-0">
    
          Collapsible Group Item #2
        
      </h5>
    </div>
    </a>
    <div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="card-block">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
      </div>
    </div>
  </div>
</div>

Answer 3

只需在 header div 上使用 data-target..

<div class="card-header" role="tab" id="headingOne" data-toggle="collapse" data-parent="#accordion" data-target="#collapseOne">
     <h5 class="mb-0">
        <a href>
           Collapsible Group Item #1
        </a>
     </h5>
</div>

http://www.codeply.com/go/f6LLnOaKHu

Answer 4

Bootstrap 4.3 添加了 .stretched-link 实用程序 class。使用它，您可以相当轻松地将 .stretched-link 添加到 link，并将 .position-relative 添加到 card-header。

使用问题中的示例：

<div id="accordion" role="tablist" aria-multiselectable="true">
  <div class="card">
    <div class="card-header position-relative" role="tab" id="headingOne">
      <h5 class="mb-0">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne" class="stretched-link">
          Collapsible Group Item #1
        </a>
      </h5>
    </div>

    <div id="collapseOne" class="collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="card-block">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header position-relative" role="tab" id="headingTwo">
      <h5 class="mb-0">
        <a class="collapsed stretched-link" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h5>
    </div>
    <div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="card-block">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
      </div>
    </div>
  </div>
</div>

Bootstrap documentation 中有很多关于此的文档以及其他示例。

Answer 5

我放弃使用 Accordion 是因为我的一些客户要求比较 2 个答案，但主要是因为使用简单 HTML5 细节控制的效率，我测试了 1000 个问题！在我的新客户的估计的单个常见问题解答页面中。 Accordion 的问题从 140 个项目开始，请参阅 https://github.com/twbs/bootstrap/issues/26419

这是最简单有效的解决方案，具有完全控制和自动“全部折叠”按钮的出现和消失功能。如果您想在真实网站上看到更高级的实现： https://airtempheating.com/faq

<details>
<summary>
  The temperature in my home feels fine, but the indoor fan runs constantly. What’s wrong?</summary>
When you switch the fan to “On” versus “Auto” your indoor fan will run continuously. Turn the switch to “Auto” and the fan will run only as needed.
</details>
<details>
<summary>
  Is there any advantage to setting the thermostat fan setting to “On” or “Auto” mode all the time?</summary>
Yes! You will have constant filtering of the air. A second advantage is that the constant airflow will allow an even temperature throughout your home. 
However, if your home feels very humid, set the fan to the “Auto” mode.
</details>
<details>
<summary>
  How long does a typical furnace or air conditioner last?</summary>
New air conditioning and heating equipment lasts longer than ever! The end of a furnace's or air conditioner’s service life depends on more than just chronological age. 
Energy-efficiency issues and the price of any necessary repairs versus the cost of upgrading to a new unit all enter into that determination.
</details> <hr>    
<button type="button" id="hdn" class="btn btn-primary" onClick="window.location.reload();">Collapse All</button>

<style>
#hdn{display:none; visibility:visible}
</style>

<script>
$(function() {$('summary').click(function() {if($('#hdn').css("display") == "none"){$('#hdn').show();}});});
</script>

单击整个 header div 时如何使 Bootstrap v4 手风琴折叠？

How to make a Bootstrap v4 accordion collapse when clicking the whole header div?

html

css

bootstrap-4

twitter-bootstrap-4