如何仅显示当前列表项并隐藏其他项(附WordPress侧边栏代码)
嘿,我来帮你搞定这个需求——只显示当前列表项,隐藏其他项。结合你已经写的代码,这里有两种靠谱的方案,你可以根据自己的情况选:
方案一:纯CSS快速实现(利用WordPress自带类)
WordPress会自动给当前页面对应的菜单项添加专属类,我们可以直接用CSS基于这个类来控制显示隐藏:
- 先确认类名:在当前分类页面打开浏览器开发者工具(按F12),查看菜单列表里的当前项,你会发现它带有
current-cat(分类菜单场景)或current-menu-item(自定义菜单场景)的类。 - 添加以下CSS代码:
/* 默认隐藏所有菜单项 */ .menuincoursepages ul li { display: none; } /* 仅显示当前活跃的菜单项 */ .menuincoursepages ul li.current-cat, .menuincoursepages ul li.current-menu-item { display: block; }
- 把这段CSS添加到主题中:可以通过后台「外观 -> 自定义 -> 额外CSS」粘贴,或者编辑主题的
style.css文件(注意用子主题的话要编辑子主题文件,避免主题更新丢失代码)。
方案二:PHP自定义输出菜单(更灵活可控)
如果默认侧边栏的菜单输出不够灵活,你可以替换原来的dynamic_sidebar代码,直接用WordPress内置函数输出菜单,精准控制显示逻辑:
分类菜单场景
<div class="menuincoursepages"> <?php // 输出分类菜单,自动识别并高亮当前分类 wp_list_categories(array( 'title_li' => '', // 去掉默认的分类标题 'current_category' => get_queried_object_id(), // 绑定当前页面的分类ID 'style' => 'list', // 保持列表结构 'hide_empty' => true, // 可选:隐藏没有文章的分类 )); ?> </div>
自定义菜单场景
如果你的侧边栏是自定义菜单而非分类菜单,换成wp_nav_menu函数:
<div class="menuincoursepages"> <?php wp_nav_menu(array( 'menu' => '你的菜单名称', // 替换为你后台创建的菜单名称 'container' => false, // 去掉默认的容器div 'current_class' => 'current-menu-item', // 指定当前项的类名 )); ?> </div>
替换完成后,依然搭配方案一中的CSS代码即可实现效果。
可选:显示当前项的子菜单
如果需要显示当前项的子菜单,修改CSS如下:
.menuincoursepages ul li, .menuincoursepages ul li ul { display: none; } .menuincoursepages ul li.current-cat, .menuincoursepages ul li.current-menu-item { display: block; } /* 显示当前项的子菜单 */ .menuincoursepages ul li.current-cat ul, .menuincoursepages ul li.current-menu-item ul { display: block; }
内容的提问来源于stack exchange,提问作者mukesh




