Question

好的，所以我在我正在制作的页面上有这个手风琴，这里是代码：

<section>
  <div class="container">
    <div class="row">
      <div class="col-sm-12 text-center">
        <h4 class="mb16">Frequently Asked Questions</h4>
        <p class="lead mb64"> Holla @twitterhandle if you've got more questions and we'll do our best to answer. </p>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-10 col-sm-offset-1">
        <ul class="accordion accordion-2 one-open">
          <li>
            <div class="title">
              <h4 class="inline-block mb0">How can X increase productivity?</h4>
            </div>
            <div class="content">
              <p> Lorem ipsum dolor sit amet, consectetur adipiscing 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. </p>
            </div>
          </li>
          <li>
            <div class="title">
              <h4 class="inline-block mb0">Does X do X?</h4>
            </div>
            <div class="content">
              <p> Lorem ipsum dolor sit amet, consectetur adipiscing 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. </p>
            </div>
          </li>
          <li>
            <div class="title">
              <h4 class="inline-block mb0">Will my staff need to take a course on how to operate the application?</h4>
            </div>
            <div class="content">
              <p> Lorem ipsum dolor sit amet, consectetur adipiscing 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. </p>
            </div>
          </li>
          <li>
            <div class="title">
              <h4 class="inline-block mb0">What does X offer?&nbsp;</h4>
            </div>
            <div class="content">
              <p> Lorem ipsum dolor sit amet, consectetur adipiscing 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. </p>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</section>

手风琴的JS是：

$('.accordion li').click(function() {
    if ($(this).closest('.accordion').hasClass('one-open')) {
        $(this).closest('.accordion').find('li').removeClass('active');
        $(this).addClass('active');
    } else {
        $(this).toggleClass('active');
    }
});

重新加载页面时，所有选项卡都已关闭。然而，在扩展其中一个之后，我无法再将它们全部关闭。其中一个仍然开放。任何帮助将不胜感激。

Answer 1

不要靠代码关闭。如果要关闭所有选项卡，请将collapsible属性设置为true。这是示例代码。

<script>
    $(function () {
        $("#accordion").accordion({
            collapsible: true
        });
    });
</script>

JS Accordion没有折叠所有标签

1 个答案: