I'm having trouble keeping the side menu open when a user clicks on one of the child menu items. Ideally, I want section 1 to display section 2 content when hovered over, and keep both sections open even when section 2 is clicked. The only time they should close is if section 4, a child of section 3, is clicked.
The issue I'm facing is that I can't seem to maintain the open state when a child menu item is clicked.
Below is my HTML:
<div id="second-menu" class="collapse navbar-collapse menu_two">
<ul class="nav navbar-nav inside-nav">
<li class="sub_menu">
<a href="#">Section 1</a>
<ul class="sidenav_wrapper">
<li class="sidenav_item sidenavlast">
<a href="#">Section 2</a>
</li>
</ul>
</li>
<li class="active_sub_menu">
<a href="#">Section 3</a>
<ul class="sidenav_wrapper">
<li class="sidenav_item">
<a href="#">Section 4</a>
</li>
<li class="sidenav_item">
<a href="#">Section 5</a>
</li>
<li class="sidenav_item">
<a href="#">Section 6</a>
</li>
<li class="sidenav_item sidenavlast">
<a href="#">Section 7</a>
</li>
</ul>
</li>
<li class="sub_menu">
<a href="#">Section 8</a>
<ul class="sidenav_wrapper">
<li class="sidenav_item">
<a href="#">Section 9</a>
</li>
<li class="sidenav_item">
<a href="#">Section 10</a>
</li>
<li class="sidenav_item sidenavlast">
<a href="#">Section 11</a>
</li>
</ul>
</li>
</ul>
</div>
This is my JavaScript code:
$('ul.navbar-nav li').hover(
function () {
$(this).find('.sidenav_wrapper:first').css('display','block');
},
function () {
$(this).find('.sidenav_wrapper:first').css('display','none');
}
);
And here is my CSS:
.menu_two {
border-left: 16px solid #dfdfdf;
padding-left: 0;
}
.sidenav_wrapper {
background: none repeat scroll 0 0 #e7ecf5;
border-left: 6px solid #8fb8e6;
display: none;
padding: 0;
}
You can view a live demo on JSFiddle here.