侧边栏为我们提供了 一些最新文章最热文章的信息,占用了一定页面,有时候我仅仅为了阅读文章内容,可以把侧边栏隐藏掉,需要的时候再出来,添加一个控制按钮,非常方便,主要通过Js来实现。
首先要查看自己的主题设计时,页面文章主题的ID,和侧边栏的ID,便于js获取,以下的内容 侧边栏 ID="side",页面主题的 ID="main",你的如果是不是的修改下面的内容。
1、自己主题的js中添加
// 隐藏侧边栏
function pr() {
var R=document.getElementById("side");
var L=document.getElementById("main");
if (R.className=="sidebar")
{
R.className="widget-area";
L.className="content-area";
}
else
{
R.className="sidebar";
L.className="primary";
}
}
2、HTML结构
你可以集成在页面中,也可以单独做一个固定按钮,css来控制显示样式
3、在主题的style.css添加css
/**隐藏显示侧边栏**/
#primary.primary {width: 100%;}
.sidebar {display: none;}
4、按钮样式
美化按钮参考样式,其实你是一个css高手,这步是多余的。
.r-hide li a {
color: #999;
line-height: 26px;
margin: 0 5px 0 0;
padding: 0 10px;
display: block;
border: 1px solid #ddd;
border-radius: 2px;
box-shadow: 0 1px 1px rgba(0,0.04);
}
.r-hide a:hover {
background: #568abc;
color: #fff;
border: 1px solid #568abc;
}
原文:http://www.Timle.CN
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。