如何解决在页面更改时保持菜单扩展处于打开状态
| 我有一个使用jQuery的扩展菜单。除以下几点外,它运作良好:当用户离开页面导航时,菜单会折叠。我希望当用户单击任何最终的 <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\');
});
如何保持最后的解决方法
我建议将值存储在cookie中,然后在页面加载时进行设置。
首先,建议您在此处下载jQuery cookie插件。
这是一个很好的插件,而且很小。设置值:
$.cookie(\"cookie_name\",\"cookie_value\");
然后在document.ready上可以拉取值:
$.cookie(\"cookie_name);
并以类似于您当前点击功能的方式对其进行适当设置。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。