Jquery第3级扩展

Question

单击菜单第3级菜单不起作用。这是工作。 Onclick第3级它没有在点击上扩展。

我还想只展开当前菜单项，因为它现在工作正常。 只需要扩大第3级。

＆＃13;

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

因为在else语句中你是作者所有（.menu-item-has-children a）但你只需要这一个

尝试这个你需要的希望

＆＃13;

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;