【发布时间】：2014-12-12 01:21:39
【问题描述】：
我是 jQuery 新手，正在研究一种垂直手风琴式导航，如果有的话，它将突出显示活动页面和父级元素。我几乎让它按照我想要的方式工作，但有一些例外。但是，我确信必须有一种方法可以将所有功能浓缩为一个，我只是不确定如何。
我的大部分页面都位于具有主要默认页面和其他页面的文件夹中。因此，如果我的菜单上有 about 并且它有一个子菜单，则子菜单将打开，about 将使用活动类突出显示。然后，如果您单击 about 文件夹中的页面，about 将保持突出显示，并且子菜单项也将突出显示。您将能够拥有父级链接并仍然切换子菜单。
我也have a fiddle，但是你看不到所有功能
以下是我想纠正的问题：
当您登陆主页时，在您单击某个项目之前，不会突出显示任何内容。
将鼠标悬停在带有箭头的父级链接上时，箭头保持不变 深色而不是白色。无法弄清楚css类 为此。
单击具有子菜单的父级链接时，子菜单 保持打开状态。但是，如果您使用箭头关闭菜单，则 箭头保持在向下位置而不是向右。
这个函数完成添加一个独立的切换元素
jQuery(document).ready(function($){
$(function() {
// Add a <span> to every .nav-item that has a <ul> inside
$('#vmenuList li').has('ul').prepend('<span class="nav-click"><i class="icon"></i></span>');
// Dynamic binding to on 'click'
$('#vmenuList').on('click', '.nav-click', function(){
// Toggle the nested nav
$(this).siblings('.submenu').slideToggle('slow');
// Toggle the arrow using CSS3 transforms
$(this).children('.icon').toggleClass('nav-open');
});
});
});
这匹配 url 并应用一个活动类
$(function() {
// this will get the full URL at the address bar
var url = window.location.href;
// passes on every "a" tag
$("#vmenuList a").each(function() {
// checks if its the same on the address bar
if (url == (this.href)) {
$(this).closest("a").addClass("active");
}
});
});
这会将一个父类添加到最近的父类（如果有的话），以便它也可以突出显示。如果用户在子菜单链接上，它还添加一个开放类以保持子菜单打开。
$(document).ready(function () {
$(function() {
$(".active").closest("#vmenuList > li").addClass("parent open");
});
});
我也使用 jquery cookie 来记住菜单项，虽然我不确定是否有必要
$(document).ready(function () {
var checkCookie = $.cookie("nav-item");
if (checkCookie != "") {
$('#vmenuList > li > a:eq('+checkCookie+')').next().show();
}
$('#vmenuList > li > a').click(function(){
var navIndex = $('#vmenuList > li > a').index(this);
$.cookie("nav-item", navIndex);
$('#vmenuList li ul').slideUp();
if ($(this).next().is(":visible")){
$(this).next().slideUp();
} else {
$(this).next().slideToggle();
}
$('#vmenuList li a').removeClass('active');
$(this).addClass('active');
});
});
【问题讨论】：
标签： jquery jquery-ui-accordion