Question

查看this网站右侧的治疗菜单。它有一组<dt>个标记，其中包含<a>标记和<ul>子菜单<li>链接列表。顶级链接和sumbmenu链接使用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。

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

时使用the path option

正确方法

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

您应该将rel值作为哈希值#relvalue传递给网址，然后使用该值。
（提示 ：查看window.location.hash ）

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

1 个答案: