Question

我想在WordPress Woocommerce中为移动设备创建一个手风琴菜单。我试图在其他问题中使用一些代码，但无法实现它。

我的代码只能处理2个级别... 当我按下此菜单层次结构的第2级时，如何让顶层保持打开状态？

谢谢！

jQuery('.menu li.menu-item-has-children ').prepend('<span class="span-plus-mobile"><i class="iplus-mobile fa fa-angle-left"></i></span>')

jQuery('.span-plus-mobile').parent().click(function() {
  jQuery(this).children('.sub-menu').slideToggle(200);
});


jQuery(".span-plus-mobile").click(function() {
	jQuery("i", this).toggleClass("fa-angle-left fa-angle-down");
});

  .menu .sub-menu {
    display: none;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="menu-main-menu" class="menu">
  <li class="menu-item menu-item-has-children">
      <a href="#" role="link">1</a>
      <ul class="sub-menu">
	      <li class="menu-item menu-item-has-children">
          <a href="#" role="link">2</a>
          	<ul class="sub-menu">
	          	<li class="menu-item">
               <a href="#" role="link">3</a>
              </li>
		          <li class="menu-item">
                <a href="#" role="link">3</a>
              </li>
             </ul>
       </ul>
</ul>
<ul id="menu-main-menu" class="menu">
  <li class="menu-item menu-item-has-children">
      <a href="#" role="link">1</a>
      <ul class="sub-menu">
	      <li class="menu-item menu-item-has-children">
          <a href="#" role="link">2</a>
          	<ul class="sub-menu">
	          	<li class="menu-item">
               <a href="#" role="link">3</a>
              </li>
		          <li class="menu-item">
                <a href="#" role="link">3</a>
              </li>
             </ul>
       </ul>
</ul>
<ul id="menu-main-menu" class="menu">
  <li class="menu-item menu-item-has-children">
      <a href="#" role="link">1</a>
      <ul class="sub-menu">
	      <li class="menu-item menu-item-has-children">
          <a href="#" role="link">2</a>
          	<ul class="sub-menu">
	          	<li class="menu-item">
               <a href="#" role="link">3</a>
              </li>
		          <li class="menu-item">
                <a href="#" role="link">3</a>
              </li>
             </ul>
       </ul>
</ul>

Answer 1

工作演示：https://codepen.io/creativedev/pen/OEmMaL

将基于类的js代码更改为ul li。

jQuery('.menu li.menu-item-has-children ').prepend('<span class="span-plus-mobile"><i class="iplus-mobile fa fa-angle-left"></i></span>')

$('li').on('click', function(e) {
  $(this).children('ul').toggle();
  $(this).siblings('li').find('ul').hide();
  e.stopPropagation();
});

jQuery(".span-plus-mobile").click(function() {
    jQuery("i", this).toggleClass("fa-angle-left fa-angle-down");
});

在第2级菜单时打开顶级水平 - Woocommerce

1 个答案: