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


Popular posts from this blog

c# - ODP.NET Oracle.ManagedDataAccess causes ORA-12537 network session end of file -

matlab - Compression and Decompression of ECG Signal using HUFFMAN ALGORITHM -

utf 8 - split utf-8 string into bytes in python -