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();
});

，但僅在打開和關閉前2次點擊有效，此后不起作用。 我需要用JS做到這一點。

Answer 1

試試看

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

可以用更好的形式編寫它，但這可以解決您的問題。

Answer 2

選項1：您可以使用jQuery中的slideToggle() 。

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

 .collapse { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul id="ul"> <li> <div class="first"> <button> <i class="fa fa-caret-down" aria-hidden="true"></i> </button> <a href="#">Ресторант Топ Мания</a> </div> <ul class="collapse"> <li> <a href="#">Обедно меню</a> </li> <li> <a href="#">Вечерно меню</a> </li> </ul> </li> </ul> 

選項2：使用collapse('hide')和collapse('show');

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

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <ul id="ul"> <li> <div class="first"> <button> <i class="fa fa-caret-down" aria-hidden="true"></i> </button> <a href="#">Ресторант Топ Мания</a> </div> <ul class="collapse"> <li> <a href="#">Обедно меню</a> </li> <li> <a href="#">Вечерно меню</a> </li> </ul> </li> </ul>