DUX主题文章页面关闭/显示侧边栏功能添加 附两种样式

本篇文章教给大家分享WordPress程序主题DUX大前端主题文章页面关闭/显示侧边栏功能的添加方法，并附带有两种样式，都是纯代码实现的哦。

功能演示

默认为显示”关闭侧边栏”，点击”关闭侧边栏”，侧边栏消失，显示”显示侧边栏”，具体效果点击文章右上角试试吧。

第一种

此版本为网络原始版，可自行修改。

效果如下：

手机端自动隐藏按钮

html代码如下：在你需要的位置添加

<div class="close-sidebar"><a href="#">关闭侧边栏</a></div>
<div class="show-sidebar" style="display:none;"><a href="#">显示侧边栏</a></div>

js代码：

// 此处只显示部分代码
jQuery(document).ready(function($) {
    $('.close-sidebar').click(function() {
        $('.close-sidebar,.sidebar').hide();
        },
        1000);
    });
    $('.show-sidebar').click(function() {
        $('.show-sidebar').hide();
        },
    });
});

注：这里的.sidebar和.content都要修改成你自己网站的侧边栏类、文章主体类。

css样式代码：

// 此处只显示部分代码
.close-sidebar,.show-sidebar{float:right;margin:-5px 0 0 10px;padding:5px 10px;text-align: center;text-shadow: 0 1px 1px #ccc;background-image: -webkit-linear-gradient(top, #fbfbfb, #e6e6e6);background-image: -moz-linear-gradient(top, #fbfbfb, #e6e6e6);background-image: -ms-linear-gradient(top, #fbfbfb, #e6e6e6);border: 1px solid #ccc;border-bottom-color: #bbb;border-radius: 1px;box-shadow: 0 2px 2px #ddd;}
.close-sidebar:hover,.show-sidebar:hover{background:#f6f6f6;}

这是原始版版！

第二种

此版本为全百科网自用版，灵感来源于网络，做了微调与美化、seo优化标签。

效果如下：

手机端自动隐藏按钮

html代码如下：在你需要的位置添加

<span class="close-sidebar" title="关闭侧边栏" ><a href="javascript:;"><i class="fa fa-toggle-off fa-lg"></i></a></span>
<span class="show-sidebar" title="开启侧边栏" ><a href="javascript:;"><i class="fa fa-toggle-on fa-lg"></i></a></span>

js代码：

// 此处只显示部分代码
jQuery(document).ready(function($) { $('.close-sidebar').click(function() { $('.close-sidebar,.sidebar').hide(); }, 1000); }); $('.show-sidebar').click(function() { $('.show-sidebar').hide(); }, }); });

注：这里的.sidebar和.content都要修改成你自己网站的侧边栏类、文章主体类。

效果出来了，必然少不了美化一下

// 此处只显示部分代码
.close-sidebar{
display:inline;
}

上述两种版本的完整版代码如下：

您暂时无权查看此隐藏内容！

通过本篇教程希望可以帮助到你，WordPress程序主题美化又进一步。