How to toggle <li> in a nested list?

user_8725207 0
Viewed 2134

I'm trying to be able to toggle these sub menus one at a time, I'm getting lost in nests and cant quite figure out how to target the correct list item,

I found that I should be using find() instead of children() as it can go deeper in the nest but still no luck in getting it working.

    <ul>
      <li>Profile</li>
      <li>Edit</li>
      <li class="drop-nav"> <a href="#"> See your products</a>  
        <ul>                                      
          <li class="drop-nav"> <a href="#"> Mens </a>        
            <ul>
              <li>  <a href="#"> jumpers </a> </li>
              <li>  <a href="#"> t shirts </a> </li>
            </ul>
          </li>
          <li class="drop-nav"> <a href="#">Womens</a>           
            <ul>                          
              <li> <a href="#"> hoodies </a> </li>
              <li> <a href="#"> leggings </a> </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>


 $(".drop-nav").on("click", function(e){
   e.preventDefault();

   });



 li ul{
 display: none;
  }
css html jquery javascript
3 Answers

You could use $(this).find('ul').eq(0) to get the ul, but I would delegate the changing of the display to the stylesheet, but use javascript to add a class where applicable. This will give you many more options for the design of your dropdown later.

$(".drop-nav").on("click", function(e) {
  e.preventDefault()
  // don't allow the event to fire horizontally or vertically up the tree
  e.stopImmediatePropagation()
  // switch the active class that you can use to display the child
  $(this).toggleClass('active')
})
/* don't target ll list items in you page, be more specific */
.drop-nav > ul {
  display: none;
}

.drop-nav.active > ul {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>Profile</li>
  <li>Edit</li>
  <li class="drop-nav"> <a href="#"> See your products</a>
    <ul>
      <li class="drop-nav"> <a href="#"> Mens </a>
        <ul>
          <li> <a href="#"> jumpers </a> </li>
          <li> <a href="#"> t shirts </a> </li>
        </ul>
      </li>
      <li class="drop-nav"> <a href="#">Womens</a>
        <ul>
          <li> <a href="#"> hoodies </a> </li>
          <li> <a href="#"> leggings </a> </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

user_17334780

I would add more descriptive class names in your markup, and make them easier to target with CSS and jQuery.

To toggle the menus you could do something like the following:

$(".dropdown-trigger1").on("click", function() {
  // Toggle the first menu 
  $(".dropdown-one").toggleClass("open");
  // Close the submenus 
  $(".dropdown-two").removeClass("open");
});

$(".dropdown-trigger2").on("click", function(e) {
  // Prevent a click on a submenu from closing the menu
  e.stopPropagation();
  // Close any open submenu
  $(".dropdown-two").removeClass("open");
  // Open the submenu that has been clicked
  $(this).find(".dropdown-two").toggleClass("open");
});
li ul {
  display: none;
}

.dropdown-one.open {
  display: block;
}

.dropdown-two.open {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>Profile</li>
  <li>Edit</li>
  <li class="dropdown-trigger1"> <a href="#"> See your products</a>
    <ul class="dropdown-one">
      <li class="dropdown-trigger2"> <a href="#"> Mens </a>
        <ul class="dropdown-two">
          <li> <a href="#"> jumpers </a> </li>
          <li> <a href="#"> t shirts </a> </li>
        </ul>
      </li>
      <li class="dropdown-trigger2"> <a href="#">Womens</a>
        <ul class="dropdown-two">
          <li> <a href="#"> hoodies </a> </li>
          <li> <a href="#"> leggings </a> </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

user_55616050

You haven't described about how you activate each sub-menu, so I will describe solution little bit abstractly. Solution is based on your HTML structure an will work if you wouldn't change it.

$('.drop-nav a').on('click', function() {
  // This next method returns next element in DOM that is after clicked a link.
  // Based on your HTML it would be ul that holds your sub-menu.
  var subMenu = $(this).next();

  // Here using subMenu selector to make something with sub-menu...
  // Example: adding CSS inline to sub. In your situation it may be something else...
  $(subMenu).css({ 'display' : 'block' });
});
user_74137940
Related