Bootstrap手风琴面板主体在第一次打击时不会塌陷 [英] Bootstrap accordion panel-body not collapsing on first hit

问题描述

我定义了以下手风琴，该手风琴可以正常工作，只是在展开第二个面板主体后第一个面板主体不会折叠，尽管如果第二次单击第二个标题最终会折叠。 p>

我可以通过使用面板崩溃折叠代替第一个标题的面板崩溃折叠来解决此问题，但是我想避免这样做这会降低页面的可用性。

任何建议可能导致此异常的原因是什么？

  {％扩展了 base.html％} 
 {％以wtf％的形式导入 bootstrap / wtf.html} 
 
< div class = page-header> 
< link href = // cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css rel = stylesheet /> 
< script src = // cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js\"></script> 
< script src = // cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js\"></script> 
< / div> 
 
< div class = panel-group id = accordion role = tablist aria-multiselectable = true>< div class = panel panel-default> 
< div class = panel-heading role = tab id = headingOne> 
< h4 class = panel-title> 
< a data-toggle = collapse data-parent =＃accordion href =＃collapseOne aria-expanded = true aria-controls = collapseOne> 
 1.标题1 
< / a> 
< / h4> 
< / div> 
< div id = collapseOne class = panel-collapse折叠在 role = tabpanel aria-labelledby = headingOne> 
< div class = panel-body> 
一些文本
< / div> 
< / div> 
< / div> 
< div class = panel panel-default> 
< div class = panel-heading role = tab id = headingTwo> 
< h4 class = panel-title> 
< a class = collapsed data-toggle = collapse data-parent =＃accordion href =＃collapseTwo aria-expanded = false aria-controls = collapseTwo> 
 2.第二个标题
< / a> 
< / h4> 
< / div> 
< div id = collapseTwo class = panel-collapsecollapse role = tabpanel aria-labelledby = headingTwo> 
< div class = panel-body> 
更多文本
< / div> 
< / div> 
< / div> 
< / div> 
  

解决方案

检查您使用的Bootstrap版本。它似乎在这里适用于v3.3.2

 < link href = // cdnjs.cloudflare.com/ajax/libs/twitter -bootstrap / 3.3.2 / css / bootstrap.css rel = stylesheet />< script src = // cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js\"> ;< / script><脚本src = // cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js\"<//script><div class =  panel-group id =手风琴 role = tablist aria-multiselectable = true> < div class = panel panel-default> < div class = panel-heading role = tab id = headingOne> < h4 class = panel-title> < data-toggle = collapse data-parent =＃accordion href =＃collapseOne aria-expanded = true aria-controls = collapseOne> 1.标题< / a> < / h4> < / div> < div id = collapseOne class = panel-collapse折叠在 role = tabpanel aria-labelledby = = headingOne> < div class = panel-body>一些文本< / div> < / div> < / div> < div class = panel panel-default> < div class = panel-heading role = tab id = headingTwo> < h4 class = panel-title> < a class = collapsed data-toggle = collapse data-parent =＃accordion href =＃collapseTwo aria-expanded = false aria-controls = collapseTwo> 2.第二个标题< / a> < / h4> < / div> < div id = collapseTwo class = panel-collapsecollapse role = tabpanel aria-labelledbyby = headingTwo> < div class = panel-body>其他文本< / div> < / div> < / div>< / div>  

I have the following accordion defined which otherwise works fine, except that the first panel-body does not collapse after expanding the second panel-body, though it does eventually collapse if I click the Second headline for a second time.

I can work around the problem by using "panel-collapse collapse" instead of "panel-collapse collapse in" for the first headline, however I would like to avoid having to do this as this reduces the usability of the page.

Any advise of what may be causing this anomaly?

{% extends "base.html" %}
{% import "bootstrap/wtf.html" as wtf %}

<div class="page-header">
    <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
</div>

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"><div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          1. Headline One
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
            Some text
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          2. Second headline
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">
          Some more text
      </div>
    </div>
  </div>
</div>

解决方案

Check the version of Bootstrap that you're using. It appears to be working here for v3.3.2

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          1. Headline One
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
            Some text
      </div>
    </div>
  </div>
  
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          2. Second headline
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">
          Some more text
      </div>
    </div>
  </div>

</div>

这篇关于Bootstrap手风琴面板主体在第一次打击时不会塌陷的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！