jQuery展開和折疊菜單不起作用

Question

我正在使用側邊欄菜單導航，當用戶單擊菜單時該導航會展開和折疊。 最重要的是，如果加載頁面時子菜單上的鏈接處於活動狀態，我希望菜單保持展開狀態。

這是我現在正在處理的代碼示例。 有人可以幫我檢查代碼中的問題嗎？

 jQuery(document).ready(function(e) { { var m = e("ul.menu li.sidebar ul.sub-menu"); e("li") } e("ul.menu > li.sidebar > a").click(function(e) { e.preventDefault() }), e(document).mouseup(function(i) { var n = e("li.sidebar"); n.is(i.target) || 0 !== n.has(i.target).length || m.hide("fast") }); }); 

 .sidebar { padding: 0 !important; margin-top: 2%; } .sidebar a { background-color: #122842; padding: 3%; color: white !important; } .sidebar .sidebar-submenu a { color: #6e6e6e !important; background-color: #e1ecf1 !important; display: block; } .sidebar .current-menu-item a { color: #22374f !important } .sidebar .sub-menu { display: none; } .current-menu-ancestor .sub-menu { display: block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <ul class="menu "> <li class="sidebar current-menu-ancestor"><a href="#">Menu A ▶</a> <ul class="sub-menu"> <li class="sidebar-submenu current-menu-item"><a href="a.com/menu1/">submenu 1</a> </li> <li class="sidebar-submenu current-menu-item"><a href="a.com/menu1/#sectionb">submenu 2</a> </li> <li class="sidebar-submenu"><a href="a.com/menu2">submenu 3</a> </li> </ul> </li> <li class="sidebar current-menu-ancestor"><a href="#">Menu B ▶</a> <ul class="sub-menu"> <li class="sidebar-submenu current-menu-item"><a href="a.com/menu1/#sectionc">submenu 4</a> </li> <li class="sidebar-submenu"><a href="a.com/menu2/#sectionb">submenu 5</a> </li> <li class="sidebar-submenu"><a href="a.com/menu3">submenu 6</a> </li> </ul> </li> <li class="sidebar"><a href="#">Menu C ▶</a> <ul class="sub-menu"> <li class="sidebar-submenu"><a href="a.com/menu4">submenu 7</a> </li> <li class="sidebar-submenu"><a href="a.com/menu5">submenu 8</a> </li> </ul> </li> </ul> 

這些是我想要實現的行為：

• 子菜單1，子菜單2和子菜單4在同一頁面上，但不同的“菜單”。 如果選擇了頁面，則菜單A和菜單B都將展開，而菜單C則保持折疊狀態。
• 如果用戶單擊菜單A下的子菜單3，則在頁面加載時，菜單A展開，而菜單B和C折疊。
• 每當子菜單處於活動狀態時，將“ current-menu-item”類添加到li標簽，將“ current-menu-ancestor”類添加到ul標簽。

我現在遇到的問題是：

• 當任何子菜單處於活動狀態但該菜單不可單擊時，菜單將自動展開

• 當我用下面的代碼替換jQuery時，該菜單是可單擊的，並且在任何子菜單處於活動狀態時會自動展開，但是該子菜單是不可單擊的（不打開鏈接）

   jQuery(document).ready(function(e){ jQuery('.sidebar a').click(function(e){ e.preventDefault(); if (jQuery(('.sidebar').children('.sub-menu:first').is(':visible')) { jQuery(('.sidebar').children('.sub-menu:first').hide(); } else { jQuery(('.sidebar').children('.sub-menu:first').show(); } 

  }）; }）;

先感謝您！

Answer 1

請在jquery之后在您的腦海中添加jquery cookie庫

<script src="path/to/Scripts/jquery_cookie.js" type="text/javascript"></script>

檢查此以獲取更多信息stack-cookie-is-not-function