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

时间: 2024-10-26 19:21:08

WordPress添加显示和隐藏侧边栏按钮开关的相关文章

JavaScript网站设计实践(四)编写about.html页面,利用JavaScript和DOM,选择性的显示和隐藏DIV元素

一.现在我们在网站设计(三)的基础上,来编写about.html页面. 这个页面要用到的知识点是利用JavaScript和DOM实现选择性地显示和隐藏某些DIV about.html页面在前面我们为了看导航栏菜单项高亮显示时,已经写了部分内容,只是那时写的代码没有实现div显示和隐藏,现在就在之前编写的基础上,为页面添加显示和隐藏div的效果. 没有写JavaScript之前看到的效果: 实现后的效果图: 这个就是我们现在要做的效果. 1.背景: 我们在about.html页面中写了一个ul列表

CSS3超酷移动手机滑动隐藏侧边栏菜单特效

这是一组共4种效果非常炫酷的CSS3移动手机滑动隐藏侧边栏菜单特效.这四种效果分别是:默认的点击滑动侧边栏菜单效果.带3D transforms的滑动侧边栏效果.文字缩放和淡入淡出效果的滑动侧边栏以及使用translate来实现滑动侧边栏的效果. 每一个滑动侧边栏效果都带有从右到左淡入淡出的滑动过渡效果.菜单栏中的菜单项以一个接一个的方式显示,这种效果是通过为它们分别添加 transition-delay 来实现的.下面来看看默认的滑动侧边栏效果的制作方法. 插件中使用了font-awesome

安卓监听键盘显示和隐藏

问题概况:横板cocos2dx游戏,点击输入框弹出键盘时,界面要求跟随网上平易,不能挡住输入框.这种问题只出现在非全屏键盘到情况下. 方案1:mainActivity重写onconfigurationChanged,监听屏幕方向旋转,添加Android:configChanges="orientation|keyboard". 缺点全屏下无效,如果设置为非全屏,<activity android:theme="@android:style/Theme.NoTitleBa

如何控制android系统中NavigationBar 的显示与隐藏

我们使用的大多数android手机上的Home键,返回键以及menu键都是实体触摸感应按键.如果你用Google的Nexus4或Nexus5话,你会发现它们并没有实体按键或触摸感应按键,取而代之的是在屏幕的下方加了一个小黑条,在这个黑条上有3个按钮控件,这种设置无疑使得手机的外观的设计更加简约.但我遇到身边用Nexus 4手机的人都吐槽这种设计,原因很简单:好端端的屏幕,被划出一块区域用来显示3个按钮(如下图所示):Back, Home, Recent.并且它一直用在那里占用着. 在androi

通过设置标签class值控制标签的显示与隐藏

需求背景如下: 原项目居民.单位.计量三模块共用一个jsp文件,显示的页面也顺理成章的统一了,幸亏没有调用同一个js,在此基础上要求居民和单位计量的分离,即居民的显示居民的相关信息,单位和计量的显示相同的信息,时间久远,仅有的未修改前的页面截图如下(红框内字段已替换成红字): 需求分析: (1)项目中添加字段并实现增删改查功能 (2)页面的展示,居民显示居民相关字段,单位和计量显示单位相关字段 字段添加这里不再赘述,主要分析页面的显示 刚开始拿到这个需求,打算另外新建单位相关的jsp页面(只包含

JS实现点击参数面板按钮显示或隐藏数据

当报表中列出数据太多时,想通过显示按钮隐藏明细数据只显示统计数据.如下图示例,那么该如何实现呢?本文以FineReport为例,来讲述JS如何实现点击参数面板按钮显示或隐藏数据. 打开报表 在参数面板添加一个标签控件,控件名为lable,设置标签控件不可见,控件值为"显示". 在参数面板添加一个按钮控件,控件名为button,控件值为"只显示合计数据",并添加点击事件. 编辑点击事件,添加下面的JavaScript代码: /*获取隐藏的标签控件的值*/ var la

jquery隐藏侧边栏和折叠侧边栏方法

两种效果如下所示: 隐藏侧边栏: 折叠侧边栏: 下面,分享隐藏侧边栏实现方法: 实现思路:给body切换class,通过class控制侧边栏和主体部分left 来实现效果 html部分: <div class="sidebar">侧边栏</div> <div class="main">主体部分</div> css部分: .sidebar{background: #333645;width: 200px; positio

Win10如何在右键菜单中添加“显示/隐藏文件”选项?

随着Win10系统的发布,一些用户已经升级到Win10系统,我们在使用Win10系统时经常会找不到所需的文件,也不知道怎么回事,估计是被隐藏起来了.遇到这样的问题要如何解决?那Win10如何在右键菜单中添加“显示/隐藏文件”选项呢?现在小编就和大家说一下Win10在右键菜单中添加“显示/隐藏文件”选项的方法. 具体步骤如下: 1.打开“此电脑”,点击工具栏中的[查看]按钮: 2.在右侧通过勾选或去掉[皇冠hg0088]即可打开或关闭 显示隐藏文件了. Win10在右键菜单中添加“显示/隐藏文件”

在RecyclerView列表滚动的时候显示或者隐藏Toolbar

先看一下效果: 本文将讲解如何实现类似于Google+应用中,当列表滚动的时候,ToolBar(以及悬浮操作按钮)的显示与隐藏(向下滚动隐藏,向上滚动显示),这种效果在Material Design 清单中有提到: "在合适的地方,当列表向下滚动,app bar可以退出屏幕,以便为内容区域留下更多的空间:而当列表向上滚动回来的时候,app bar又重新显示出来". 注:这里的向下滚动是指滚动到下面查看更多内容,相对应的手势操作其实是往上.同理向上滚动是指查看前面的内容,而手势其实是向下