html – Bootstrap手风琴面板 – 机身在首次击中时不会折叠

概述我有以下手风琴定义,否则工作正常,除了第一个面板体扩展第二个面板体后不会崩溃,但如果我再次点击第二个标题,它最终会崩溃. 我可以通过在第一个标题中使用“panel-collapse collapse”而不是“panel-collapse collapse in”来解决这个问题,但是我希望避免这样做,因为这会降低页面的可用性. 有什么可能导致这种异常的建议吗？ {% extends "base.ht 我有以下手风琴定义,否则工作正常,除了第一个面板体扩展第二个面板体后不会崩溃,但如果我再次点击第二个标题,它最终会崩溃.

我可以通过在第一个标题中使用“panel-collapse collapse”而不是“panel-collapse collapse in”来解决这个问题,但是我希望避免这样做,因为这会降低页面的可用性.

有什么可能导致这种异常的建议吗？

{% extends "base.HTML" %}{% import "bootstrap/wtf.HTML" as wtf %}<div >    <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  ID="accordion" role="tabList" aria-multiselectable="true"><div >    <div  role="tab" ID="headingOne">      <h4 >        <a data-toggle="collapse" data-parent="#accordion" href="#collapSEOne" aria-expanded="true" aria-controls="collapSEOne">          1. headline One        </a>      </h4>    </div>    <div ID="collapSEOne"  role="tabpanel" aria-labelledby="headingOne">      <div >            Some text      </div>    </div>  </div>  <div >    <div  role="tab" ID="headingTwo">      <h4 >        <a  data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">          2. Second headline        </a>      </h4>    </div>    <div ID="collapseTwo"  role="tabpanel" aria-labelledby="headingTwo">      <div >          Some more text      </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><script src="//cdnjs.cloudflare.com/AJAX/libs/twitter-bootstrap/3.3.2/Js/bootstrap.Js"></script><div  ID="accordion" role="tabList" aria-multiselectable="true">    <div >    <div  role="tab" ID="headingOne">      <h4 >        <a data-toggle="collapse" data-parent="#accordion" href="#collapSEOne" aria-expanded="true" aria-controls="collapSEOne">          1. headline One        </a>      </h4>    </div>    <div ID="collapSEOne"  role="tabpanel" aria-labelledby="headingOne">      <div >            Some text      </div>    </div>  </div>    <div >    <div  role="tab" ID="headingTwo">      <h4 >        <a  data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">          2. Second headline        </a>      </h4>    </div>    <div ID="collapseTwo"  role="tabpanel" aria-labelledby="headingTwo">      <div >          Some more text      </div>    </div>  </div></div>

总结

以上是内存溢出为你收集整理的html – Bootstrap手风琴面板 – 机身在首次击中时不会折叠全部内容，希望文章能够帮你解决html – Bootstrap手风琴面板 – 机身在首次击中时不会折叠所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。