jquery保持菜单下拉状态
时间: 2023-08-02 10:09:13 浏览: 46
要实现菜单下拉状态的保持,可以使用jQuery的类操作和Cookie来实现。
首先,在菜单项被点击时,使用jQuery的addClass()方法给当前菜单项添加一个active类,同时移除其他菜单项的active类。然后,使用jQuery的siblings()方法选择当前菜单项的兄弟元素,移除它们的active类。
接下来,将当前菜单项的文本和链接保存到Cookie中。当页面重新加载时,从Cookie中读取上次保存的菜单项文本和链接,使用jQuery的addClass()方法给该菜单项添加active类,同时移除其他菜单项的active类。
下面是一段示例代码:
```javascript
$(function() {
// 获取Cookie中保存的菜单项文本和链接
var activeText = $.cookie('activeText');
var activeLink = $.cookie('activeLink');
// 如果Cookie中有保存的菜单项,则根据保存的文本和链接添加active类
if (activeText && activeLink) {
$('.menu-item:contains(' + activeText + ')').filter(function() {
return $(this).attr('href') === activeLink;
}).addClass('active').siblings().removeClass('active');
}
// 菜单项被点击时
$('.menu-item').click(function() {
// 添加active类,并移除其他菜单项的active类
$(this).addClass('active').siblings().removeClass('active');
// 将当前菜单项的文本和链接保存到Cookie中
$.cookie('activeText', $(this).text());
$.cookie('activeLink', $(this).attr('href'));
});
});
```
需要注意的是,这段代码使用了jQuery的cookie插件来读取和保存Cookie。如果没有安装该插件,需要先引入jQuery和cookie插件的js文件。