WordPress添加显示和隐藏侧边栏按钮开关

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

点击前:

点击后:

实现代码:
1.在header.php中添加如下代码,当然也可以单独写进一个js文件,然后在header.php中引入也可以,我是引入的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<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.在你布置该按钮的地方添加如下代码,一般是添加到文章标题下面,当然代码可以根据你自己的主题稍作修改。

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

如果有什么不懂的就留言吧。
参考网址:http://www.dedewp.com/2316.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值