javascript - 带 Bootstrap 3 的 Accordion

Question

我正在尝试使用 Bootstrap Collapse 制作 Accordion 。我有这个 HTML:

<ul id="ul">
    <li>
        <div class="first">
             <button>
                 <i class="fa fa-caret-down" aria-hidden="true"></i>
             </button>
             <a href="#">Name</a>
         </div>
        <ul class="collapse">
            <li>
                <a href="#">item 1</a>
            </li>
            <li>
                <a href="#">item 2</a>
            </li>
        </ul>
    </li>
</ul>

当我点击 #ul > li 时，它必须显示 ul.collapse。

我正在使用这个 JS:

$('#ul > li').on('click', function (e) {
    $('.collapse.in').collapse('hide');
    $(this).find('.collapse').collapse();
});

，但它仅适用于打开和关闭的前 2 次点击，之后，它不起作用。我需要用 JS 来做到这一点。

Answer 1

试试看

 $('#ul > li').on('click', function (e) {
  if($('.collapse').hasClass('in')) {
    $('.collapse.in').collapse('hide');
  } else {
      $(this).find('.collapse').collapse('show');
  }
});

它可以写成更好的形式，但这会解决您的问题。