jack361博客最近有很多使用知言 Tinection 主题的人问我本站的“隐藏/显示侧边栏”功能怎么实现的，今天在此分享一下“Tinection 主题免插件实现 WordPress 隐藏/显示侧边栏”功能的相关实现方法。当然本方法不局限于 tinection 主题，修改一下可适用于所有主题！
跟着下面的步骤走，即可实现“点击按钮隐藏/显示侧边栏”，具体的结构和效果可以参考本站，祝成功！
2016.5.15 更新新版，精简了第一步和第二步的代码。
1 添加隐藏/显示边栏按钮
根据需要在页面相应位置添加显示和隐藏按钮，代码：
|
1
2
3
|
<span class=“lxtxxsycbl”>
<a style=“cursor:pointer;”id=“stb_btn_kuan”title=“Close the sidebar”>隐藏边栏</a>
</span>
|
2 添加 JS
在 js 文件中加入以下 js 代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
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(“显示边栏”);
}elseif($(‘.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 样式表中添加如下样式：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
#main-wrap-fulltp {
margin:0pxauto;
}
#main-wrap-fulltp {
max-width:1200px;
}
#main-wrap-fulltp .single-text {
max-width:960px;
margin:0auto;
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;
}
}
|
友情提示：一定要注意，各个标签、id、class、命名等需相对应！