How to close toggle when next list is toggled

Question

This is a multi-child dropdown menu, Actually I am trying to toggle a menu one at a time (i.e. only selected menu will show other should close).

Here is my code

HTML

JS:

$(document).ready(function{
  $(".dropdown-submenu a.test").on("click", function(e){
    $(this).next("ul").toggle();
    e.stopPropagation();
    e.preventDefault();
  });
});

CSS:

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -1px;
}

This didn't close after another menu toggles and the third level of submenu didn't flexible for the first answer. thanks,

Swati · Accepted Answer

You need to get closest ul where click event has occur then using .not() exclude it from hiding and then simply use next("ul").toggle(); to show dropdown menu .

Demo code :

$(document).ready(function() {
  $(".dropdown-submenu a.test").on("click", function(e) {
    //get closest `li`-> ul 
    var selector = $(this).closest(".dropdown-submenu").find("ul");
    //hid all other li and ul
    $(".dropdown-submenu ul").not(selector).not(this.closest('ul')).hide()
    $(this).next("ul").toggle(); //show this a-> next ul
    e.stopPropagation();
    e.preventDefault();
  });
});

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -1px;
  display: none;
}

How to close toggle when next list is toggled

Answers (1)

Related Questions