toggleClass with multi-level navigation

Vote count:

0

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

edited 19 secs ago

Karl-André Gagnon

16.7k

asked 1 min ago

CheyneOSy

3