简单升级一下「分类管理」插件，实现「高级筛选」按钮默认隐藏!

liuian 2025-09-09 04:34 16 浏览

我们的「分类管理」插件，可以在 WordPress 后台文章列表页面实现通过标签过滤，甚至自定义的分类过滤，比如下图就是通过标签筛选文章列表：

并且如果简单的过滤不能找到所需的文章，那么插件还提供了高级筛选功能，点击上图箭头所指的「高级筛选」按钮，就可以打开高级筛选界面：

它通过多个分类或者自定义分类的叠加筛选过滤，具体操作，看我之前的介绍文章：WPJAM「分类管理」：全能 WordPress 分类管理插件。

默认情况下这个「高级筛选」按钮一直显示在 WordPress 后台文章列表「筛选」按钮的后面，有点点那么占空间，所以我想能不能默认的情况下，隐藏，当用户把鼠标移动到「筛选」按钮，再显示呢？这样也不占用空间碍眼，当要用的时候，也能很快就能用上。

于是我首先简单更新了一下 WPJAM Basic 插件，给 WPJAM 后台 JS 增加一个 list_table_load trigger，然后简单增加下面这两段简单 JS 和 CSS 代码即可实现。

首先是 JS 代码：

jQuery(function($) {
	$('body').on('list_table_load', function(){
		if($('a[data-action="filter"]').length && $('span.filter-action-wrap').length == 0){
			$('input[name="filter_action"]').wrap('<span class="filter-action-wrap"></span>');
			$('a[data-action="filter"]').appendTo('span.filter-action-wrap');
		}
	});
});

简单说就是当后台 List Table 加载完成之后，给默认的「筛选」按钮外层加一层 class 为 filter-action-wrap 的 span，然后把「高级筛选」按钮也移到这个 span 中。

然后添加以下的代码：

span.filter-action-wrap a[data-action="filter"]{display:none;}
span.filter-action-wrap:hover a[data-action="filter"]{display:inline-block;}

CSS 很简单，但是为了水一下文章，我还是强制给大家解释一下：

就是通过 filter-action-wrap 这个 span 将「高级筛选」按钮默认隐藏，然后如果鼠标移到这个 span 上面，「高级筛选」按钮就自动显示。

当然也可以全部使用 JS 实现，但是代码量大很多，我的想法是能够使用 CSS 实现的功能尽量使用 CSS，效果好，效率高，兼容性也更高。

html 按钮

上一篇：点击导航栏按钮切换按钮背景色_导航栏按钮图标素材
下一篇：还用 JavaScript 实现返回顶部?纯 CSS 轻松搞定!

简单升级一下「分类管理」插件，实现「高级筛选」按钮默认隐藏!

相关推荐

飞牛OS入门安装遇到问题，如何解决?

系统C盘清理:微信PC端文件清理，扩大C盘可用空间步骤

如何在 iPhone 和 Android 上恢复已删除的抖音消息

Boost高性能并发无锁队列指南:boost::lockfree::queue

大模型手册: 保姆级用CherryStudio知识库

西门子博途中如何输入读取和编辑date and time变量

用什么工具在Win中查看8G大的log文件?

我的Excel打开后是一堆乱码，如何解决?

如何在 Windows 10 或 11 上通过命令行安装 Node.js 和 NPM

威联通NAS安装阿里云盘WebDAV服务并添加到Infuse

简单升级一下 「分类管理」插件，实现「高级筛选」按钮默认隐藏!

相关推荐

飞牛OS入门安装遇到问题，如何解决?

系统C盘清理:微信PC端文件清理，扩大C盘可用空间步骤

如何在 iPhone 和 Android 上恢复已删除的抖音消息

Boost高性能并发无锁队列指南:boost::lockfree::queue

大模型手册: 保姆级用CherryStudio知识库

西门子博途中如何输入读取和编辑date and time变量

用什么工具在Win中查看8G大的log文件?

我的Excel打开后是一堆乱码，如何解决?

如何在 Windows 10 或 11 上通过命令行安装 Node.js 和 NPM

威联通NAS安装阿里云盘WebDAV服务并添加到Infuse

简单升级一下「分类管理」插件，实现「高级筛选」按钮默认隐藏!