我有一个菜单,子菜单可以切换(隐藏/显示类型交易).
是否有一种相对简单的方法来记住菜单的最后状态？
(单击标题时隐藏/显示子菜单并更改标题的样式,以便背景箭头更改(向上/向下)).
它工作正常,但我希望它记住最后一个状态,所以当用户访问网站上的另一个页面并返回时,菜单显示的方式与用户离开时相同.
我对饼干不是很好,所以任何帮助都会受到赞赏.
是的,菜单是使用PHP从db动态生成的.
现在只有2个带子菜单的标题,但会有更多,所以我需要一些对任意数量的子菜单都“可扩展”的方法.
一次访问也没有必要记住它.
是否有一种相对简单的方法来记住菜单的最后状态？
(单击标题时隐藏/显示子菜单并更改标题的样式,以便背景箭头更改(向上/向下)).
它工作正常,但我希望它记住最后一个状态,所以当用户访问网站上的另一个页面并返回时,菜单显示的方式与用户离开时相同.
我对饼干不是很好,所以任何帮助都会受到赞赏.
是的,菜单是使用PHP从db动态生成的.
现在只有2个带子菜单的标题,但会有更多,所以我需要一些对任意数量的子菜单都“可扩展”的方法.
一次访问也没有必要记住它.
解决方法
你可以使用
jQuery cookie plugin for this
只需在隐藏,显示时设置cookie,然后在加载时设置基于任何cookie设置显示的内容.你可以这样命名cookie：“display” – this.id
如果您使用< div id =“unique”>包装每个菜单就像你有间歇泉(所以我们有一个唯一的ID来设置一个cookie),这样的东西应该工作：
$('h3').next('.g_menu').filter(function() {
return $.cookie("expanded-" + $(this).parent("[id]").attr("id"));
}).hide();
$('h3').click(function(){
$(this).toggleClass('closeit').toggleClass('openit');
var menu = $(this).next('.g_menu');
if(menu.is(':visible')) {
menu.fadeOut(50);
$.cookie("expanded-" + $(this).parent().attr("id"),true);
} else {
menu.fadeIn(980);
$.cookie("expanded-" + $(this).parent().attr("id"),null);
}
});
要使其工作,请包装< h3 class =“openit”>其他< / h3>< div class =“g_menu”>< / div>在< div id =“other”>< / div>中You can play with a sample to see this in action here.
