如何保持側面菜單打開

我試圖讓我的側面菜單在用戶單擊其中一個子菜單項時保持打開狀態。例如，如果我將鼠標懸停在第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

來源

2015-04-23 Niks

如果我可能會問，爲什麼不添加按鈕以便用戶可以決定何時打開或關閉菜單？這樣，你可以防止你的用戶很多挫折 – Dave

說明

我已將jQuery .click()函數添加到您的小提琴中。此功能在當前.sidenav_wrapper中添加.open類，並在.sidenav_wrapper中選擇鏈接時從其他.sidenav_wrapper中刪除.open類。 e.preventDefault()可防止超鏈接的默認操作。這不會將瀏覽器帶到其他URL。

CSS

.open { 
    display: block !important; 
}

jQuery的

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

檢查這在更新jsFiddle

來源

2015-04-23 08:23:34 Hkidd

這沒有工作 – Niks

你沒有'e_preventDefault（）'試試嗎？ http://jsfiddle.net/9kw03b5a/3/ – Hkidd

我已經成功地得到它工作。我所做的只是創建了一個php循環，使菜單項處於活動狀態，並創建了一個活動類並使用該類顯示塊。

來源

2015-04-23 09:53:05 Niks

如何保持側面菜單打開

回答

相關問題