带多级导航的toggleClass

Question

Right now, I'm trying to manipulate a menu just like Microsoft.com . I'm having an issue with being able to toggle the hidden unordered list in my links. I'll make a local fiddle in case you want to observe here

This is the HTML Markup :

 <nav class="multi-menu">
  <ul>
   <li>
     <a href="#">Link</a>
  <div class="sub-menu">
   <ul>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
   </ul>
  </div>
   </li>
   <li><a href="#">Link</a></li>
   <li><a href="#">Link</a></li>
   <li><a href="#">Link</a></li>
   <li><a href="#">Link</a></li>
  </ul>
</nav>

This is the CSS Markup :

 .multi-menu, .sub-menu {
  background: #34495e;
 }

 .multi-menu li {
  display: inline-block;
 }

 .multi-menu li a {
  display: block;
  padding: 20px 30px;
  color: white;
  text-decoration: none;
 }

 .sub-menu { 
  position: absolute;
  display: inline-block;
  width: 100%;
 }

 .sub-menu ul li {
  display: block;
  float: left;
  width: 20%;
 }

Here is the JQuery Markup

 $(document).ready(function(){
  $(".multi-menu li a").each(function() {
if ($(this).next().length > 0) {
    $(this).addClass("parent");
   };
})

var menu = $(".multi-menu li a.parent");
 $(".parent").click(function (e){
  e.preventDefault();
 $(this).parent(".sub-menu ul").toggleClass('open');
  });
});

Answer 1

First of all you can remove the div and add the sub-menu class directly to the ul element:

<li>
    <a href="#">Link</a>
    <ul class="sub-menu">
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
    </ul>
</li>

Then in the jQuery code, use siblings or next to find the submenu related to the parent link clicked:

$(".parent").on("click", function (e){
    e.preventDefault();
    $(this).siblings(".sub-menu").toggleClass('open');
});

For animated visibility effects, you can use various jQuery methods, for example:

$(this).siblings(".sub-menu").slideToggle();