zoukankan      html  css  js  c++  java
  • 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({
                     "1265px"
                },
                0);
            });
            $('.show-sidebar').click(function() {
                $('.show-sidebar').hide();
                $('.close-sidebar,.sidebar').show();
                $('.content').animate({
                     "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

  • 相关阅读:
    mfc窗口,父窗口parentwindow,所有者窗口ownerwindow 区别
    svn冲突问题详解 SVN版本冲突解决详解
    input的on(‘input’,function(0{})事件
    input 输入框两种改变事件的方式
    JSON格式
    AJAX的dataType问题
    什么是跨域请求?
    JSON.parse()和JSON.stringify()使用介绍
    .replace(/-/g,"/")的用法
    docker 实践(一)
  • 原文地址:https://www.cnblogs.com/shenjieblog/p/5061362.html
Copyright © 2011-2022 走看看