I am trying to figure out how to make sure that when I close my dropdown menu, the submenu within it also closes. Currently, the submenu remains open if I toggle the dropdown menu again.
Here is the HTML code snippet:
<nav id="sideNavBar">
<ul class="nav nav-pills nav-stacked">
<li class="dropdown">
<a href="#" id="menu" data-toggle="dropdown" class="droptown-toggle">Dropdown<span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a href="#" class="test" data-toggle="dropdown">Submenu-1<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
<a href="#">Item-1</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
And here is the JavaScript code snippet:
$(document).ready(function() {
var $links = $('.dropdown-submenu a.test').on("click", function(e) {
var submenu = $(this).next();
$subs.not(submenu).hide()
submenu.toggle();
//$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
var $subs = $links.next();
});