与Bootstrap手风琴3

Question

我正在努力与Bootstrap Collapse合作。我有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();
});

，但只有前两次点击才能打开和关闭，之后，它无效。我需要使用JS执行此操作。

Answer 1

试试

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

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