WordPress添加显示和隐藏侧边栏按钮开关的两种方法

在很多的地方都看见过这种效果，就是在文章页面可以切换显示和隐藏侧边栏功能，感觉还是很有用，比如一篇文章的文字内容过多，那么就可以通过隐藏侧边栏来显示更多的文字便于浏览。比如你可以通过点击我文章标题下方的隐藏侧栏按钮来查看效果，现在把代码分享出来

~~第一种方法（简洁版）亲测可用~~

1.在header.php中添加如下代码

 <script>
 jQuery(document).ready(function($) {
 $('.close-sidebar').click(function() {
 $('.close-sidebar,.sidebar').hide();
 $('.show-sidebar').show();
 $('.content').animate({
 width: "1265px"
 },
 0);
 });
 $('.show-sidebar').click(function() {
 $('.show-sidebar').hide();
 $('.close-sidebar,.sidebar').show();
 $('.content').animate({
 width: "885px"
 },
 0);
 });
 });
</script>

jQuery(document).ready(function($) {

$('.close-sidebar').click(function() {

$('.close-sidebar,.sidebar').hide();

$('.show-sidebar').show();

$('.content').animate({

width: "1265px"

0);

});

$('.show-sidebar').click(function() {

$('.show-sidebar').hide();

$('.close-sidebar,.sidebar').show();

$('.content').animate({

width: "885px"

0);

});

</script>

代码说明：将其中的1265px、885px、.content、.sidebar修改为你主题对应的文章内容页+侧边栏宽度、文章页内容宽度、文章内容容器、侧边栏容器即可。
2.在你布置该按钮的地方添加如下代码，一般是添加到文章标题下面，当然代码可以根据你自己的主题稍作修改。

<span class="bianlan">
  <span class="close-sidebar">隐藏侧边</span>
  <span class="show-sidebar" style="display:none;">显示侧边</span>
</span>

</span>

~~第二种方法（美化版）自行测试~~

1. 添加隐藏/显示边栏按钮

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

<span class="lxtxxsycbl">
  <a style="cursor:pointer;" id="stb_btn_kuan" title="Close the sidebar">隐藏边栏</a>
</span>

</span>

2 .添加JS

在js文件中加入以下js代码：

jQuery(document).ready(function($) {
 $('.lxtxxsycbl').click(function() {
 if ($('.lxtxxsycbl a').is('#stb_btn_kuan')) {
 $('#sidebar').hide();
 $('#main-wrap-left').attr("id", "main-wrap-fulltp");
 $('#single-blog-wrap').removeClass("two-col-container container");
 $('.lxtxxsycbl a').attr("id", "stb_btn_zhai").attr("title", "Open the sidebar").text("显示边栏");
 } else if ($('.lxtxxsycbl a').is('#stb_btn_zhai')) {
 $('#sidebar').show();
 $("#main-wrap-fulltp").attr("id", "main-wrap-left");
 $("#single-blog-wrap").addClass("two-col-container container");
 $('.lxtxxsycbl a').attr("id", "stb_btn_kuan").attr("title", "Close the sidebar").text("隐藏边栏");
 }
 })
});

jQuery(document).ready(function($) {

$('.lxtxxsycbl').click(function() {

if ($('.lxtxxsycbl a').is('#stb_btn_kuan')) {

$('#sidebar').hide();

$('#main-wrap-left').attr("id", "main-wrap-fulltp");

$('#single-blog-wrap').removeClass("two-col-container container");

$('.lxtxxsycbl a').attr("id", "stb_btn_zhai").attr("title", "Open the sidebar").text("显示边栏");

} else if ($('.lxtxxsycbl a').is('#stb_btn_zhai')) {

$('#sidebar').show();

$("#main-wrap-fulltp").attr("id", "main-wrap-left");

$("#single-blog-wrap").addClass("two-col-container container");

$('.lxtxxsycbl a').attr("id", "stb_btn_kuan").attr("title", "Close the sidebar").text("隐藏边栏");

}

})

});

3 .添加Css

在style.css样式表中添加如下样式：

 #main-wrap-fulltp {
 margin:0px auto;
}
#main-wrap-fulltp {
 max-width:1200px;
}
#main-wrap-fulltp .single-text {
 max-width:960px;
 margin:0 auto;
 padding:10px;
}
@media screen and (min-width:1500px) {
 #main-wrap-fulltp {
 max-width:1392px;
}
}@media screen and (max-width:1499px) and (min-width:1360px) {
 #main-wrap-fulltp {
 max-width:1250px;
}
}@media screen and (max-width:1240px) and (min-width:641px) {
 #main-wrap-fulltp {
 width:98%;
}
}#main-wrap-fulltp .relpost-inner-pic,#main-wrap-fulltp .relpost-inner-pic span {
 max-height:190px;
}
@media screen and (max-width:860px) {
 .lxtxxsycbl {
 display:none;
}
}