jquery - 使用浏览器的后退按钮时，如何使用 toggleClass() 保持应用类？

Question

单击按钮时，我正在使用jQuery toggleClass向 DIV 添加一个类。添加类后，DIV 会展开以显示 DIV 中的所有内容，并带有height:auto;.

当我单击将我带到另一个页面的链接，然后单击浏览器后退按钮时，我的问题就出现了。当我返回原始页面时，不再应用该类。有没有办法在整个人的访问过程中保持该类的应用，即使他们访问另一个页面然后点击后退按钮？

Answer 1

这对我有用：有一个 cookie 来保持按钮按下状态，以及一个 cookie 来跟踪实际按下的按钮（对于多个按钮，还要检查哪个按钮被按下）

var buttonpack;

$(function(){
	if( ($.cookie("ButtonPressedState") == 1) && ($.cookie("buttonCookie")=="buttonpack")) {
		 $('#'+$.cookie("buttonpack")).toggleClass("inputbutton:active active");
							} else {
 		  $(this).siblings().removeClass('inputbutton:active active');
									}

$('.inputbutton').click(function () {
					$(this).toggleClass("inputbutton:active active");
					$(this).siblings().removeClass('inputbutton:active active');
						 ButtonId = $(this).attr('id'); 
						if(($('.inputbutton')).hasClass("inputbutton:active active")){
							buttonpack=$(this).attr('id');

							$.cookie("ButtonPressedState", 1, {expires: 1, path:'/'});
							$.cookie("buttonId", buttonpack, {expires: 1, path:'/'});	
						}else{
							$.cookie("ButtonPressedState", 0, {expires: 1, path:'/'});
							$.cookie("buttonpack", null, {expires: 1, path:'/'});
							buttonpack=null;
								}
					
				});
	});

Answer 2

是的，您可以将切换状态存储在 cookie 中。例如，有一个 jquery 插件调用 jquery cookie：https://github.com/carhartl/jquery-cookie页面加载后，您可以按照 cookie 中的说明添加或删除类。