配合使用 Cookie 控制边栏的显示隐藏

发现很多博客都添加了边栏的显示隐藏功能，但是没有保存状态，只要一切换页面边栏又出来的，隐藏功能变得耍帅多于实用。为此我查找了一下 jQuery 的 Cookie 操作教程，使边栏隐藏状态保存到 Cookie ，切换页面照样隐藏，效果就像小博这样。

本来我使用的 jQuery 代码是五木好同志的“完美终结版”，但是使用 cookie 后会出现第一次点击无效的情况，估计是因为他使用的是 toggle 方法，toggle 就是模拟鼠标的连续单击事件，在两种状态下切换，隐藏边栏是第一状态，如果你本来就隐藏了边栏，第一次点击时还是切换到第一状态，其实状态没有改变，出现无效点击的错觉。

下面分享我使用的方法：

jQuery(function(){
	var thesidebar = $.cookie("sidebar"); //读取cookie "sidebar"的值
	if(thesidebar=="hide"){  //"sidebar"的值为"hide"则隐藏边栏
		$('#sidebar').hide().prev().animate({width: "860px"}, 1000); //隐藏边栏并设 #content 宽860px，宽度和速度要修改，结构不同也要改~
		$("#menu-item-2304 a").text("显示边栏"); //修改按钮文字，这里使用的是控制按钮的ID，肯定要修改的
	}
	$("#menu-item-2304 a").click(function(){ //设置按钮点击动作
		if($('#sidebar').is(':visible')){ //如果边栏显示则执行以下代码
			$(this).text("显示边栏");
			$('#sidebar').hide().prev().animate({width: "860px"}, 1000);
			$.cookie("sidebar", "hide", { expires: 3 }); //写入属性 sidebar ，值为 hide ，有效时间 3 天
		}else{ //如果边栏隐藏则执行以下代码
			$(this).text("隐藏边栏");
			$('#sidebar').delay(800).show(0).prev().animate({width: "599px"}, 800); //显示边栏并设 #content 为原来的宽度，宽度和速度要修改，结构不同也要改~
			$.cookie("sidebar", null); //删除 cookie "sidebar"
		};return false //点击链接不跳转
	});
});

原理通过上面的注释应该可以理解了，哈哈。要注意一点，jQuery 本身是不支持 Cookie 操作的，需要使用官方的插件，你可以在这里下载到，http://plugins.jquery.com/project/Cookie，下载后像挂 jQuery 库一样挂上，那就ok了。