其实这个东西想做已经很久了,在自己换了主题之后就想能够实现动态隐藏掉侧边栏,虽然文章不长。但是这样对于阅读还是比较好的。从网上也看过一些代码,但是效果一般,现在实现的效果还可以,但是默认隐藏和显示的代码还是有问题。并且目前也不想折腾了,先把以前的代码贴出来吧。这个东西也是参考的别人的文章。
代码的主要内容就是一个js代码,内容如下:
/* 侧边栏 */
$(document).ready(function(){
//SetCookies
(function(){
function SetCookie(c_name,value,expiredays){
var exdate=new Date();
exdate.setDate(exdate.getDate()+expiredays);
document.cookie=c_name+"="+escape(value)+((expiredays==null)?"":";expires="+exdate.toGMTString())+";path=/";
//如果你希望每个页面都有个独立的 Cookies 设置的话请去掉+";path=/",这样的话leeiio.me/xxx/ 和leeiio.me/yyy/ 的侧边栏状态都将是独立的
}
window['RootCookies'] = {};
window['RootCookies']['SetCookie'] = SetCookie;
//JavaScript 的命名空间,假使你已有一个 SetCookie 的函数的话将不会与之冲突,通过 RootCookie.SetCookie() 调用
})();
//Toggle Sidebar
$('.close-sidebar').click(function() {
RootCookies.SetCookie('show_sidebar', 'no', 7); //设置一个名为show_sidebar的cookie,值为no,保存天数为1
$('.close-sidebar').hide(); //隐藏"关闭侧边栏"按钮
$('.show-sidebar').show(); //显示"显示侧边栏"按钮
$('.obaby-sidebar1').fadeOut(1000);
$('#content').animate({width: "928px"}, 1000); });
$('.show-sidebar').click(function() {
RootCookies.SetCookie('show_sidebar', 'no', -1);
//设置一个名为show_sidebar的cookie,值为no,保存天数为-1,也就是说让cookies失效,也就是删除这个cookie
$('.show-sidebar').hide(); //隐藏"显示侧边栏"按钮
$('.close-sidebar').show(); //显示"关闭侧边栏"按钮
$('#content').animate({width: "678px"}, 1000);
$('.obaby-sidebar1').animate({opacity: 1.0}, 500).fadeIn('slow');});
});