Question

我是jQuery的新手，正在开发一个垂直手风琴类型导航，它会突出显示活动页面和父级元素（如果有的话）。除了一些例外，我几乎让它以我想要的方式工作。但是，我确信必须有一种方法可以将所有功能压缩成一个，我只是不确定如何。

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

Here is an example page

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

这匹配网址并应用活动类

$(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

让我试着逐一回答你的问题：

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

这很可能是因为您的链接与url变量的输出不同。通过console.log(url)进行测试，你会看到你是否正确。

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

当使用箭头悬停在父级链接上时，箭头将保持黑暗而不是白色。一直无法找到css类。

这是因为您只使用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/

单击具有子菜单的父级别链接时，子菜单将保持打开状态。但是，如果您使用箭头关闭菜单，箭头将保持在向下位置而不是向右。

这些实际上是2个问题： A。点击父菜单不会折叠它， B。向下/向右图标状态不会改变。< / p>

以下是这些答案：

：一种。菜单未折叠：看起来主要元素的href属性具有有效网址，因此它会重定向到该网页，而不是仅仅处理菜单折叠/展开。这适用于你的小提琴示例，因为它的#标记中有一个哈希（href）。

<强> B中。箭头不变：问题源于open / nav-open类分别保留在li.parent和i.icon上。您必须深入了解插件（或脚本），了解折叠/展开状态更改机制的工作方式，并确保在折叠菜单时删除上述类。

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

1 个答案: