Jquery 3级展开

Question

单击时菜单 3 级菜单不起作用。这是工作。 Onclick 3rd level 它没有在点击时展开。

我还想只扩展当前菜单项，因为它现在运行良好。 只需要扩展第三级。

$('.menu-item-has-children').children('a').on('click', function(e) {
      e.preventDefault();

      if ($(this).next('ul').is(':visible')) {
        $(this).removeClass('sub-active').next('ul').slideUp(250);
      } else {
        $('.menu-item-has-children > a').removeClass('sub-active').next('ul').slideUp(250);
        $(this).addClass('sub-active').next('ul').slideToggle(250);
      }
    });

.wa-slide-in-nav a {
    display: block;
    padding: 5px 0;
    text-decoration: none;
    color: #393939;
    font-weight: 600;
}
.wa-slide-in-nav ul.sub-menu li a {
    color: #696969;
    font-weight: 400;
}
.wa-slide-in-nav li.menu-item-has-children > a:after {
    content: "\f067";
    font-family: "FontAwesome";
    font-size: .6em;
    position: absolute;
    right: 2px;
    top: 30%;
}
.wa-slide-in-nav li.menu-item-has-children > a.sub-active:after {
    content: "\f068";
    font-family: "FontAwesome";
    font-size: .6em;
    position: absolute;
    right: 2px;
}
.wa-slide-in-nav ul.sub-menu {
    display: none;
    margin: 0;
    padding: 0;
    position: relative;
}
.wa-slide-in-nav ul.sub-menu li {
    padding-left: 15px;
}
.wa-slide-in-nav li.selected > ul.sub-menu {
    display: block;
}
.wa-slide-in-nav li i {
    padding-right: 5px;
}
.wa-slide-in-nav > li >a{
    text-transform: uppercase;
    position: relative;
}
.wa-slide-in-nav > li > ul.sub-menu > li > a {
    padding: 2px 0 2px;
    font-size: 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<ul class="wa-slide-in-nav">
	<li class="menu-item-has-children">
		<a href="#">Item</a>
		<ul class="sub-menu">
			<li><a href="#">Item</a></li>

			<li class="menu-item-has-children">
				<a href="#">Item 3rd level</a>
				<ul class="sub-menu">
					<li><a href="#">Item</a></li>
					<li><a href="#">Item</a></li>
				</ul>
			</li>
			
		</ul>

	</li>
	<li><a href="#">Item</a></li>
	<li class="menu-item-has-children">
    <a href="#">Item</a>
      <ul class="sub-menu">
        <li>
          <a href="#">Item</a></li>
      </ul>
    </li>
</ul>

Answer 1

因为在 else 语句中你写了所有 (.menu-item-has-children a) 但你只需要这个

试试这个希望这是你需要的

$('.menu-item-has-children a').click(function(e) {
            e.preventDefault();
            if ($(this).hasClass( "sub-active" )) {
                $(this).removeClass('sub-active').next('ul').slideUp(250);
            } else {
                $(this).removeClass('sub-active').next('ul').slideUp(250);
                $(this).addClass('sub-active').next('ul').slideToggle(250);
            }
        });

.wa-slide-in-nav a {
    display: block;
    padding: 5px 0;
    text-decoration: none;
    color: #393939;
    font-weight: 600;
}
.wa-slide-in-nav ul.sub-menu li a {
    color: #696969;
    font-weight: 400;
}
.wa-slide-in-nav li.menu-item-has-children > a:after {
    content: "\f067";
    font-family: "FontAwesome";
    font-size: .6em;
    position: absolute;
    right: 2px;
    top: 30%;
}
.wa-slide-in-nav li.menu-item-has-children > a.sub-active:after {
    content: "\f068";
    font-family: "FontAwesome";
    font-size: .6em;
    position: absolute;
    right: 2px;
}
.wa-slide-in-nav ul.sub-menu {
    display: none;
    margin: 0;
    padding: 0;
    position: relative;
}
.wa-slide-in-nav ul.sub-menu li {
    padding-left: 15px;
}
.wa-slide-in-nav li.selected > ul.sub-menu {
    display: block;
}
.wa-slide-in-nav li i {
    padding-right: 5px;
}
.wa-slide-in-nav > li >a{
    text-transform: uppercase;
    position: relative;
}
.wa-slide-in-nav > li > ul.sub-menu > li > a {
    padding: 2px 0 2px;
    font-size: 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<ul class="wa-slide-in-nav">
	<li class="menu-item-has-children">
		<a href="#">Item</a>
		<ul class="sub-menu">
			<li><a href="#">Item</a></li>

			<li class="menu-item-has-children">
				<a href="#">Item 3rd level</a>
				<ul class="sub-menu">
					<li><a href="#">Item</a></li>
					<li><a href="#">Item</a></li>
				</ul>
			</li>
			
		</ul>

	</li>
	<li><a href="#">Item</a></li>
	<li><a href="#">Item</a></li>
	<li class="menu-item-has-children">
    <a href="#">Item</a>
      <ul class="sub-menu">
        <li>
          <a href="#">Item</a></li>
      </ul>
    </li>  
</ul>