Jquery 3rd level expand

Question

メニュー第3レベルのメニューがクリックされていません。ここで働いています。 Onclickの第3レベルでは、クリックしても展開されません。

私は現在完全に動作しているので、現在のメニュー項目を展開したいだけです。 第3レベルを拡張するだけです。

$('.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"> 
 
\t <li class="menu-item-has-children"> 
 
\t \t <a href="#">Item</a> 
 
\t \t <ul class="sub-menu"> 
 
\t \t \t <li><a href="#">Item</a></li> 
 

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

 
\t </li> 
 
\t <li><a href="#">Item</a></li> 
 
\t <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-項目がある - 子供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"> 
 
\t <li class="menu-item-has-children"> 
 
\t \t <a href="#">Item</a> 
 
\t \t <ul class="sub-menu"> 
 
\t \t \t <li><a href="#">Item</a></li> 
 

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

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