2012-01-11 67 views
1

上保持状态退房处理菜单上this网站的右侧。它有一个<a>标签一套<dt>标签和子菜单的<ul>列表里面<li>链接。顶级链接和sumbmenu链接使用rel属性组合在一起。遇到问题定制的jQuery菜单

正如你可以看到子滑下当您单击顶级链接。我想要做的是在页面加载之间保持状态,以便如果子菜单中的任何链接被点击,它将保持打开状态。我正在尝试使用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'); 
    } 


});  
+0

请在这里发表您样品的标记,否则一旦出问题的解决了这个问题不再是利用别人可能共享您的问题。 – 2012-01-11 12:11:18

+0

我没有看到类“菜单”的任何dom元素 - 你可能想要#menu,但是然后你想要#menu> li> a而不是我认为 – 2012-01-11 12:16:29

+1

创建一个jsfiddle与所需的CSS,HTML和JS可能会其他用户更容易尝试和帮助您。 – 2012-01-11 12:17:01

回答

0

更新 * 原来的问题 *

使用的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。

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


正确的方法

这将是最好的,虽然不依赖于cookie进行导航,因为它会成为问题,当用户开始使用后退按钮时..

你应该真的把rel的值作为散列#relvalue传递给url,并用它代替。
提示:退房window.location.hash

+0

谢谢,可能有另一种方法做到这一点,因为当显示链接页面时,子菜单链接被赋予class =“active”,我可能会使用它来保持父ul打开。 – user794846 2012-01-11 13:16:03

+0

@ user794846的确如此,如果已经有了一个标识主动节点的条款,那将是最好的。 – 2012-01-11 13:39:40

+0

我已经将第一部分的代码更改为以下内容,但是它的做法是打开所有ul的代码只是打开包含课程的那个。请参阅原始问题中的编辑。 – user794846 2012-01-11 14:34:00