jQuery 实现 WordPress 中小工具点击标题隐藏/显示内容

一直想实现 WordPress 侧栏的小工具点击标题隐藏或显示小工具内容,无奈能力不够不知道怎么写。最近学了一点 jQuery 的用法,发现 jQuery 中有实现元素滑动显示/隐藏的效果,于是打算用来实现该功能,没想到还真的弄成了,于是乎在这里分享一下。

jQuery 滑动效果

jQuery 中有实现元素滑动效果的方法:

slideDown() // 元素向下滑动(显示)
slideUp() // 元素向上滑动(隐藏)
slideToggle() // 切换元素向下/向上滑动的状态(切换显示/隐藏)

实现思路

实现的思路是根据我使用的主题(twentyseventeen)的结构:侧栏小工具都在 id 为 “secondary” 的元素下,且每一个小工具都是一个 class 为 “widget” 的 section 元素,如果是自定义的 HTML 小工具,则 section 元素还会有一个 “widget_custom_html” 的 class,对于这种自定义 HTML 的小工具不实现点击显示/隐藏效果其中,小工具如果有标题的话就会在 section 元素下有一个 class 为 “widget-title” 的 “h2″元素,小工具的内容则都在 section 元素的下一级,也就是和小工具同级。因此,只要将设置小工具内容切换隐藏/显示状态的函数作为小工具标题的点击事件回调方法就可以了。

具体方法为先循环遍历 id 为 “secondary” 的元素下 class 不是 “widget_custom_html” 的 section.widget 子元素,在循环内将每一个 section.widget 元素下的 h2.widget-title 标题子元素的 click 方法设置为对当前循环中的 section.widget 元素下除了 h2.widget-title 标题子元素外的其他子元素调用 slideToggle() 方法。

同时对指定小工具内容元素调用 slideUp() 方法来实现默认隐藏功能。

思路说到这里,下面是代码实现。

具体代码

代码使用 jQuery,并且在页面加载完成时再执行,因此放到页面的任意位置即可。

jQuery(document).ready(function ($) {
	// widget 点击隐藏/显示,采用 jQuery 的滑动效果
	$("#secondary").children("section.widget:not(.widget_custom_html)").each(function(index,element){
		$(element).children("h2.widget-title").click(function(){
			$(element).children(":not(h2.widget-title)").slideToggle("slow");
		});
	});
	// 文章归档和最近评论默认隐藏
	$(".widget_recent_comments,.widget_archive").children(":not(h2.widget-title)").slideUp();
});

上面的代码只在 twentyseventeen 主题下测试成功,其他主题要根据主题小工具的结构来改动代码。

参考

jQuery 效果–滑动 | 菜鸟教程


版权说明:
作品 sunriseydy 采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。
文章内容如未说明均为原创,欢迎转载,但请注明原作者(sunriseydy)和原文链接(https://blog.sunriseydy.top/technology/server-blog/wordpress/widget-toggle/)
部分来自互联网的文章,如有侵权,请联系我,24小时内删除,谢谢

分享到微博 分享到QQ 微信赞赏 点赞 0

评论一下呗亲

电子邮件地址不会被公开。 必填项已用*标注