JQuery Accordion没有在Bootstrap断点工作

时间:2014-10-20 17:41:51

标签: javascript jquery html css twitter-bootstrap

我有一个使用当前/标签的工作JQuery手风琴小部件。它反映了JQueryUI网站API文档。我现在已经将Bootstrap的12col网格布局应用到页面,并将手风琴放在中心10列内。在992px断点处/以上的扩展和折叠动作一切正常。当div改变宽度时,我应该失去点击标题并更改当前打开部分的能力。

JQuery在Bootstrap之前加载。

JQuery v1.9.1 Bootstrap v3.2.0

有8个默认的@media匹配设置为最小宽度:992px,但我无法找到答案为什么javascript折叠功能会在该像素宽度下停止工作。

<div class="container">
    <div class="row">
        <div class="col-md-2 col-xs-1"></div> <!--- spanner div to adjust left cushion --->
        <div class="col-md-8 col-xs-10 sign_in_container">

    <div id="accordion">
  <h3>Section 1</h3>
  <div>
    <p>
    Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
    ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
    amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
    odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
    </p>
  </div>
  <h3>Section 2</h3>
  <div>
    <p>
    Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
    purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
    velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
    suscipit faucibus urna.
    </p>
  </div>
  <h3>Section 3</h3>
  <div>
    <p>
    Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
    Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
    ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
    lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
    </p>
    <ul>
      <li>List item one</li>
      <li>List item two</li>
      <li>List item three</li>
    </ul>
  </div>
  <h3>Section 4</h3>
  <div>
    <p>
    Cras dictum. Pellentesque habitant morbi tristique senectus et netus
    et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
    faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
    mauris vel est.
    </p>
    <p>
    Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
    Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
    inceptos himenaeos.
    </p>
  </div>
</div>

</div> <!--- END div class="col-md-8 col-xs-10 sign_in_container" --->

        <div class="col-md-2 col-xs-1"></div> <!--- spanner div to adjust right cushion --->
    <div> <!--- END row --->
</div> <!--- END container --->

1 个答案:

答案 0 :(得分:-1)

虽然我在任何地方仍然无法找到答案,但我完成了大量的试验和错误,最后的解决方法或解决方案是将崩溃移到它自己的行中