WordPress免插件:给文章添加隐藏/显示侧边栏

一般文章都是默认显示侧边栏,为了提高阅读体验,很多博客都会添加一个"隐藏/显示侧边栏 "功能,点击“关闭侧边栏”,右侧侧边栏消失,左侧文章主体部分完全显示,并且导航内的文字变为“显示侧边栏”,再次点击则过程相反。当然,闲鱼是自带这个功能的,只是将样式改了一下,代码样式是在timle看到的。

动图演示

WordPress免插件:给文章添加隐藏/显示侧边栏
PS:首先分别查看自己主题的主体样式是不是id=“primary”,侧边栏又是不是id=“sidebar”,不是则修改之;另外宽度width值也根据页面宽度相应修改!

CSS样式

  1. /**隐藏显示侧边栏**/  
  2. #primary.primary {width: 100%;}  
  3. .sidebar {displaynone;}  
  4. /*  

PS:
以下非必要修改:WordPress主题模板相应文件中:

  1. <div id="primary"> 修改为: <div id="primary" class="content-area">  
  2. <div id="sidebar"> 修改为: <div id="sidebar" class="widget-area">  

非必要修改,可改可不改,不影响实际效果。

JS函数

  1. // 隐藏侧边  
  2. function pr() {  
  3. var R=document.getElementById("sidebar");  
  4. var L=document.getElementById("primary");  
  5. if (R.className=="sidebar")  
  6.     {  
  7.         R.className="widget-area";  
  8.         L.className="content-area";  
  9.     }  
  10. else  
  11.     {  
  12.         R.className="sidebar";  
  13.         L.className="primary";  
  14.     }  
  15. }  
  16. /*  

调用按钮

①、添加按钮

根据需要在页面相应位置添加显示和隐藏按钮,代码:

  1. <li class="r-hide">  
  2. <a href="javascript:pr()" onclick="javascript:this.innerHTML=(this.innerHTML=='隐藏边栏'?'显示边栏':'隐藏边栏');">隐藏边栏</a>  
  3. </li>  

PS:知更鸟自带前台样式
WordPress免插件:给文章添加隐藏/显示侧边栏

  1. <li class="r-hide">  
  2. <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>  

②、按钮样式

以下给出一个美化按钮的参考样式,可以根据需要自行调整:

  1. .r-hide li a {  
  2.     color#999;  
  3.     line-height26px;  
  4.     margin: 0 5px 0 0;  
  5.     padding: 0 10px;  
  6.     displayblock;  
  7.     border1px solid #ddd;  
  8.     border-radius: 2px;  
  9.     box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);  
  10. }  
  11. .r-hide a:hover {  
  12.     background#568abc;  
  13.     color#fff;  
  14.     border1px solid #568abc;  
  15. }  
  16. /*  

 
Over

发表评论

:?::razz::sad::evil::!::smile::oops::grin::eek::shock::???::cool::lol::mad::twisted::roll::wink::idea::arrow::neutral::cry::mrgreen:

目前评论:6   其中:访客  5   博主  1

    • 云 1 来自天朝的朋友 谷歌浏览器 Windows 7 四川省成都市 电信

      大佬 你这个网站好多特效啊! :idea:

      • 成都川科卫校 成都川科卫校 1 来自天朝的朋友 谷歌浏览器 Windows 10 广东省 联通

        这个很有用

        • 免费新大陆 免费新大陆 0 来自天朝的朋友 谷歌浏览器 Windows 7 广东省 电信(绿色上网全省通用)

          试了下你的隐藏,感觉好好玩。

            • 闲鱼 闲鱼 【博主】 来自天朝的朋友 搜狗浏览器 Windows 7 广东省 电信(绿色上网全省通用)

              @免费新大陆 :oops: 我的是主题自带的,需要的话可以自己添加

                • MDLuffy MDLuffy 0 来自天朝的朋友 谷歌浏览器 Linux 北京市 移动

                  @闲鱼 你这是什么主题呀

              • 四川卫校 四川卫校 1 来自天朝的朋友 QQ浏览器 Windows 7 江苏省苏州市 电信

                每次看见代码就头疼,