2016-09-26 88 views
0

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

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

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摺疊。
  • 每當一個子菜單是活動的,類「當前菜單項」添加到 LI標記和類「當前菜單 - 祖先」被添加到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(); 
         } 
    

    }); });

預先感謝您!

回答

0

請在你的腦袋只是jQuery的

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

檢查後添加的jQuery的cookie庫本作的詳細信息stack-cookie-is-not-function