jquery - 当子菜单项处于事件状态并保持子菜单打开时，使用 jquery 突出显示父级

Question

我是 jQuery 新手，正在开发垂直 Accordion 式导航，该导航将突出显示事件页面和父级元素(如果有)。我几乎让它按照我想要的方式工作，除了一些异常(exception)。但是，我确信一定有一种方法可以将所有功能压缩为一个，我只是不确定如何实现。

我的大多数页面都位于具有主默认页面和其他页面的文件夹中。因此，如果我的菜单上有 about 并且它有一个子菜单，则子菜单将打开，并且 about 将用事件类突出显示。然后，如果您单击 about 文件夹中的页面，about 将保持突出显示，并且子菜单项也将突出显示。您将能够拥有父级链接并仍然切换子菜单。

<强> Here is an example page

我也have a fiddle ，但您无法看到所有功能

以下是我想要纠正的问题:

1. 当您登陆主页时，在单击某个项目之前，不会突出显示任何内容。

2. 当鼠标悬停在带有箭头的父级别链接上时，箭头将保持不变 深色而不是白色。无法弄清楚 css 类 为此。

3. 当单击具有子菜单的父级链接时，子菜单 保持开放。但如果您用箭头关闭菜单， 箭头保持在向下位置而不是向右。

该函数完成添加一个独立的切换元素

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');
    });
});

Answer 1

让我尝试一一回答您的问题:

1. When you land on the main page, nothing is highlighted until you click on an item.

这很可能是因为您的链接与 url 的输出不同。多变的。通过执行 console.log(url) 来测试它然后你就会知道你是否做对了。

我使用正确的链接设置了第一个菜单项的 URL，因此您可以在此处看到结果:http://jsfiddle.net/rnccdbs7/2/

2. When hovering on a parent level link with an arrow, the arrow remains dark instead of white. Haven't been able to figure out the css class for this.

这是因为您仅将图标定位为 hover ，而不是完整的菜单项，因此删除此...

.nav-click:hover .icon { background: url('http://www.goodwin.edu/test/addbutton/rightwhite.png') no-repeat center center; }

...然后添加这个...

#verticalmenu #vmenuList > li:hover .icon { background: url('http://www.goodwin.edu/test/addbutton/rightwhite.png') no-repeat center center; }

查看实际操作:http://jsfiddle.net/rnccdbs7/1/

3. When clicking on a parent level link that has a submenu, the submenu stays open. But if you toggle the menu closed with the arrow, the arrow remains in the down position instead of to the right.

这实际上是两个问题:A.单击父菜单不会折叠它，B.向下/向右图标状态不会改变。

以下是这些问题的答案:

A.菜单未折叠: 看起来像 href主元素的属性具有有效的 url，因此它会重定向到该页面，而不仅仅是处理菜单折叠/展开。这在你的 fiddle 示例中工作正常，因为它的 # 中有一个哈希( href )标签。

B.箭头没有改变:问题源于 open/nav-open类(class)继续 li.parent和i.icon分别。您必须更深入地研究您的插件(或脚本)，了解折叠/展开状态更改机制的工作原理，并确保在折叠菜单时删除上述类。