html - 如何在 WP 中隐藏除具有当前菜单祖先的元素之外的完整菜单

Question

我有一个 Wordpress 站点，我试图在其中解决一个非常简单的问题。我在顶部有一个主菜单，在左侧有一个二级菜单。顶部菜单包含 1 级元素，而左侧菜单包含所有元素。对于左侧菜单，我使用内置的“自定义菜单” 小部件。

为了简化外观，我只想在左侧显示与当前区域相关的元素，即带有 current-menu-ancestor 的元素。

1. 有什么方法可以优雅地做到这一点，只在 HTML 中生成所需的代码？是通过在 functions.php 中使用一些自定义函数(我使用的是 21 子主题)，还是通过一些“高级自定义菜单”插件(如果有的话)？

2. 我正尝试在 CSS 中实现它，而且我快完成了。我选择了我想保留的绿色元素和我想隐藏的红色元素，但我无法将 CSS 规则应用于 display: none 红色元素，因为那样它也会隐藏绿色元素。

到目前为止我的 CSS 是这样的:

#secondary ul {background: red;}

#secondary li.current-menu-ancestor ul,
#secondary li.current-menu-item ul {background: green;}

这是一个示例页面，您可以在其中看到哪些是我试图隐藏的红色元素，哪些是我试图保留的绿色元素。

http://kozossegikertek.hu/csatlakozz/

我只想让左侧菜单上的绿色元素可见。

Answer 1

好的，我做了纯 CSS 解决方案。如果有人可以做到，我仍然会寻求 WP 特定的解决方案:

#secondary li a {
display: none;
}

#secondary li.current-menu-item ul a,
#secondary li.current-menu-ancestor ul a {
display: inherit;
}