很多的网站都是默认显示侧边栏，为了提高阅读体验,有的提供了一个"隐藏/显示侧边栏 "功能,通过点击“关闭侧边栏”，右侧侧边栏消失，左侧文章主体部分完全显示，实现了网页的全屏浏览，再次点击则过程相反。为了给读者一个良好的体验折腾,将侧边栏的开关给加上了，代码源自百度，样式基于layui修订。
动图演示：
直接使用本站进行体验更直观
注意：首先分别查看自己主题的主体样式是不是id=“primary”，侧边栏又是不是id=“sidebar”，不是则修改之；另外宽度width值也根据页面宽度相应修改！
CSS样式：
/**隐藏显示侧边栏**/
#primary.primary {width: 100%;}
.sidebar {display: none;}
请将以上代码加入CSS文件中
JS函数：
// 隐藏侧边
function pr() {
var R=document.getElementById("sidebar");
var L=document.getElementById("primary");
if (R.className=="sidebar")
{
R.className="widget-area";
L.className="content-area";
}
else
{
R.className="sidebar";
L.className="primary";
}
}
请将以上js代码引入主页或复制进已有的js文件中
调用按钮：
根据需要在页面相应位置添加显示和隐藏按钮，代码如下：
当然，以上代码或许过于简单，也不美观，可以按以下格式进行美化
本站基于layui的样式代码如下：
侧边
.layui-form-switch {
height: 100%;
margin-top: -2px;
line-height: 10px;
border-radius:0px;
padding: 3.5px 2px;
}
.layui-form-switch i {
width: 12px;
height: 12px;
}
.cblshousuo {
float: right;
/*width: 180px;*/
height: 100%;
}
.cblwenzi {
/*color: #fff;*/
/*border-radius: 2px;
background: #5FB878;*/
font-size: 12px;
padding: 2px 5px;
border-left: 1px solid #d2d2d2;
border-top: 1px solid #d2d2d2;
border-bottom: 1px solid #d2d2d2;
}
暂无评论