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

文章页面侧边栏切换功能实现教程

最新推荐文章于 2024-09-06 08:16:35 发布

转载最新推荐文章于 2024-09-06 08:16:35 发布 · 1.1k 阅读

文章标签：

#php #javascript #ViewUI

本文介绍如何在文章页面实现侧边栏的显示与隐藏功能，以提高用户体验。通过简单的JavaScript代码，用户可以在文章标题下方点击按钮，轻松切换侧边栏的可见性，从而在文字内容过多时展示更多内容。

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

点击前：

点击后：

实现代码：
1.在header.php中添加如下代码，当然也可以单独写进一个js文件，然后在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>

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

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

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