Как открыть боковое меню

Question

Я пытаюсь открыть свое боковое меню, когда пользователь нажимает на одно из элементов детского меню. Например, если я навешиваю над разделом 1, отображается раздел 2, и если я нажму на раздел 2, то будет показано содержимое раздела 2, но раздел 1 все еще открыт и не закрывается, если я не нажму на раздел 4, который является дочерним элементом раздел 3.

Моя проблема в том, что я не могу заставить ее оставаться открытой, когда открыт элемент детского меню.

Мой 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> 

Мои JS

$('ul.navbar-nav li').hover(
    function() { 
     $(this).find('.sidenav_wrapper:first').css('display','block'); 
    }, 
    function() { 
     $(this).find('.sidenav_wrapper:first').css('display','none'); 
    } 
); 

мой 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; 
} 

Вот jsfiddle: JSFIDDLE

Answer 1

Объяснение

Я добавил функцию jQuery .click() к вашей скрипке. Эта функция добавляет класс .open к текущему .sidenav_wrapper и удаляет класс .open с другого .sidenav_wrapper, когда ссылка выбрана в .sidenav_wrapper. e.preventDefault() предотвращает действие гиперссылки по умолчанию. Это не приведет браузер к другому URL-адресу.

CSS

.open { 
    display: block !important; 
} 

JQuery

$('.sidenav_wrapper').click(function(e) { 
    e.preventDefault(); 
    $('.sidenav_wrapper').removeClass('open'); 
    $(this).addClass('open'); 
}); 

Проверьте это в обновленном jsFiddle

Answer 2

мне удалось получить его за работой. Все, что я сделал, было сделано в php-петле, которая активировала элемент меню и создала активный класс и использовала этот класс для отображения блока.