jquery - How to keep a side menu open -
i'm trying side menu stay open when user clicks 1 of child menu items. example if hover on section 1, section 2 displayed , if click on section 2 section 2 content shown, section 1 still open , doesn't close unless click on section 4, child of section 3.
my problem can't stay open when child menu item open.
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>
my js
$('ul.navbar-nav li').hover( function () { $(this).find('.sidenav_wrapper:first').css('display','block'); }, function () { $(this).find('.sidenav_wrapper:first').css('display','none'); } );
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; }
here jsfiddle:jsfiddle
explanation
i've added jquery .click()
function fiddle. function adds .open
class current .sidenav_wrapper
, removes .open
class other .sidenav_wrapper
when link selected in .sidenav_wrapper
. e.preventdefault()
prevents default action of hyperlink. won't take browser other url.
css
.open { display: block !important; }
jquery
$('.sidenav_wrapper').click(function(e) { e.preventdefault(); $('.sidenav_wrapper').removeclass('open'); $(this).addclass('open'); });
check in updated jsfiddle