波旁手风琴点击一次展开/折叠点击

Question

你好，我是新来的，我想知道是否有人可以帮忙。我已经实施了bourbon.io的手风琴，但是我无法通过单击就打开并折叠。

它打开，但保持打开状态。

$('.js-accordion-trigger').bind('click', function(e){ 
    jQuery(this).parent().find('.submenu').slideToggle('fast'); // apply the toggle to the ul 
    jQuery(this).parent().toggleClass('is-expanded'); 
    e.preventDefault(); 
}); 

JSFiddle Demo

Answer 1

下面看看是否是你想要的

$('.js-accordion-trigger').on('click', function(e) { 
 
    $('ul.submenu').not($(this).parent().find('ul.submenu')).slideUp('fast'); 
 
    $(this).parent().find('.submenu').toggleClass('is-expanded').slideToggle('fast'); 
 
    e.preventDefault(); 
 
});

ul.submenu { 
 
    display: none; 
 
} 
 

 
.is-expanded { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="accordion"> 
 
    <li> 
 
    <a href="javascript:void(0)" class="js-accordion-trigger">Accordion Item</a> 
 
    <ul class="submenu"> 
 
     <li> 
 
     <a href="javascript:void(0)">Sub Item 1</a> 
 
     </li> 
 
     <li> 
 
     <a href="javascript:void(0)">Sub Item 2</a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
    <li> 
 
    <a href="javascript:void(0)" class="js-accordion-trigger">Another Item</a> 
 
    <ul class="submenu"> 
 
     <li> 
 
     <a href="javascript:void(0)">Sub Item 1</a> 
 
     </li> 
 
     <li> 
 
     <a href="javascript:void(0)">Sub Item 2</a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
</ul>