jquery - 在页面更改时保持菜单扩展打开

Question

我有一个使用 jquery 的扩展菜单。除了一件事，它运行良好:当用户离开页面时，菜单会折叠。当用户单击任何最终

链接时，我希望菜单保持打开状态。所有这些链接都会打开同一个页面。这些页面上的内容是从数据库中抓取并由 ?id= 确定的。

代码如下:

HTML:

 <ul id="nav">
    <li><a href="javascript:;">Products</a>
           <ul id="nav2">
        <li><a href="javascript:;">Domestic Market</a>
            <ul>
                <li><a href="index.php?page=Product&id=1">Link1</a></li>
                    <li><a href="index.php?page=Product&id=2">Link2</a></li>
                    <li><a href="index.php?page=Product&id=3">Link3</a></li>
        </ul>
       </li>
       <li><a href="javascript:;">Commercial Market</a>
            <ul>
                <li><a href="">Coming Soon</a></li>
            </ul>
       </li>
      </ul>
       </li>
       </ul>

CSS:

ul {
    padding: 0px;
    margin: 0px;
    width: 10em;
        list-style-type:none;

}
li {
     font: 100% Verdana, Arial, Helvetica, sans-serif;
 font-size:12px;
 color:#003;  
}

li ul {
    display: none;
}
li.active > ul {
    display: block;
}

jQuery:

$('#nav').delegate('li,a', 'click', function(e) {
    e.stopPropagation();

    var self = $(e.target),
        //get a reference to the clicked element
        active = self.parents().andSelf() //select all li's that should be active
        .addClass('active'); //and activate them
    $('#nav .active').not(active).removeClass('active'); //deactivate others  
});

$(document).click(function(){
    $('.active').removeClass('active'); 
});

如何让最后的

保持打开状态？

Answer 1

我建议将值存储在 cookie 中，然后在页面加载时设置它。

首先，我建议您下载 jQuery cookie 插件 here . 这是一个很好的插件，而且很小。设置值:

$.cookie("cookie_name", "cookie_value");

然后在 document.ready 上你可以提取值:

$.cookie("cookie_name);

并使用类似于您当前点击功能的东西对其进行适当设置。