一般文章都是默认显示侧边栏，为了提高阅读体验,很多博客都会添加一个”隐藏/显示侧边栏 “功能,点击“关闭侧边栏”，右侧侧边栏消失，左侧文章主体部分完全显示，并且导航内的文字变为“显示侧边栏”，再次点击则过程相反。当然,闲鱼是自带这个功能的,只是将样式改了一下,代码样式是在timle看到的。
动图演示
PS：首先分别查看自己主题的主体样式是不是id=“primary”，侧边栏又是不是id=“sidebar”，不是则修改之；另外宽度width值也根据页面宽度相应修改！
CSS样式
- /**隐藏显示侧边栏**/
- #primary.primary {width: 100%;}
- .sidebar {display: none;}
- /*
PS:
以下非必要修改：WordPress主题模板相应文件中:
- <div id=“primary”> 修改为： <div id=“primary” class=“content-area”>
- <div id=“sidebar”> 修改为： <div id=“sidebar” class=“widget-area”>
非必要修改，可改可不改，不影响实际效果。
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”;
- }
- }
- /*
调用按钮
①、添加按钮
根据需要在页面相应位置添加显示和隐藏按钮，代码：
- <li class=“r-hide”>
- <a href=“javascript:pr()” onclick=“javascript:this.innerHTML=(this.innerHTML==’隐藏边栏’?’显示边栏’:’隐藏边栏’);”>隐藏边栏</a>
- </li>
PS：知更鸟自带前台样式
- <li class=“r-hide”>
- <li class=“r-hide”><a href=“javascript:pr()” title=“侧边栏”><i class=“fa fa-caret-left”></i> <i class=“fa fa-caret-right”></i></a></li>
②、按钮样式
以下给出一个美化按钮的参考样式，可以根据需要自行调整：
- .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, 0, 0.04);
- }
- .r-hide a:hover {
- background: #568abc;
- color: #fff;
- border: 1px solid #568abc;
- }
- /*
微信公众号：rizhuti
关注我们，获取更多的全网素材资源，有趣有料！
12000人已关注
评论抢沙发