javascript - 在自定义 jQuery 菜单上维护状态时遇到问题

Question

查看 this 右侧的治疗菜单网站。它有一组<dt>带有 <a> 的标签标签和 <ul>子菜单列表<li>里面有链接。顶级链接和子菜单链接使用 rel 分组在一起。属性。

正如您所看到的，当您单击顶级链接时，子菜单会向下滑动。我想做的是维护页面加载之间的状态，以便如果单击子菜单中的任何链接，它将保持打开状态。我正在尝试使用 rel 属性来执行此操作。

这是到目前为止我的代码，我对逻辑有点困惑:

function initMenu() {
    $('.menu ul:not(.active)').hide();

    var checkCookie = $.cookie("nav-item");
    if (checkCookie != "") {
        $('.menu').each(function () {
            var state = $(this).find('a:first-child').attr('rel');
            if (state == checkCookie) {
                alert(state);
                $(this).next().slideToggle('normal');       
            }
        })       
    }

    $('.menu > a:first-child').click(function(e) {
        e.preventDefault();
        var navIndex = $(this).attr('rel');
        $.cookie("nav-item", navIndex);

        $(this).next().slideToggle('normal');
    });
}  

$(function() {
    initMenu();
});

编辑** 我已将代码的第一部分更改为此，以便尝试使用事件类。但它所做的是打开所有 ul，而不仅仅是包含带有事件类的 li 的 ul。

$('.menu ul:not(.active)').hide();

 $('.menu').each(function (){

   if ($(this).children(".active")){

       $(this).children('ul').slideToggle('normal');  
   }


 });       

Answer 1

更新 *更新原始问题后*

用于if

if ($(this).find(".active").length){
       $(this).children('ul').slideToggle('normal');  
   }

<小时/>

原始答案

有一件事是

if (state == checkCookie) {
    alert(state);
    $(this).next().slideToggle('normal');       
}

this在此上下文中指的是.menu，而不是a链接。

你应该将其更改为

if (state == checkCookie) {
    alert(state);
    $(this).children('ul').slideToggle('normal');       
}

<小时/>

另一个是 cookie 插件创建(默认情况下)属于创建它们的页面的 cookie。因此，当您更改页面时，它无法访问另一个页面创建的 cookie。

使用the path option保存时 $.cookie("nav-item", navIndex, {path: '/'});

<小时/>

正确的方法

最好不要依赖 cookie 进行导航，因为当用户开始使用后退按钮时，这会出现问题..

您确实应该将 rel 值作为哈希 #relvalue 传递给网址，并使用它。
(提示:查看 window.location.hash )