加入收藏 | 设为首页 | 会员中心 | 我要投稿 安卓应用网 (https://www.0791zz.com/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > CMS系统 > 正文

Wordpress隐藏显示侧边栏

发布时间:2020-05-25 00:48:11 所属栏目:CMS系统 来源:互联网
导读:侧边栏为我们提供了 一些最新文章最热文章的信息,占用了一定页面,有时候我仅仅为了阅读文章内容,可以把侧边栏隐藏掉,需要的时候再出来,添加一个控制按钮,非常方便,主要通过Js来实现。首先要查看自己的主题

侧边栏为我们提供了 一些最新文章最热文章的信息,占用了一定页面,有时候我仅仅为了阅读文章内容,可以把侧边栏隐藏掉,需要的时候再出来,添加一个控制按钮,非常方便,主要通过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

    (编辑:安卓应用网)

    【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    • 推荐文章
        热点阅读