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

  • Z时代
  • 2024-01-10
  • 分类：问答

你好，我是新来的，我想知道是否有人可以帮忙。我已经实施了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

回答：

下面看看是否是你想要的

$('.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>

以上是 波旁手风琴点击一次展开/折叠点击 的全部内容， 来源链接： utcz.com/qa/258087.html

回到顶部