如何隐藏 WP 中除具有当前菜单祖先的项目之外的完整菜单

Question

我有一个 WordPress 网站，我正在尝试解决一个非常简单的问题。我的顶部有一个主菜单，左侧有一个辅助菜单。顶部菜单包含 1 级项目，而左侧菜单包含所有项目。对于左侧菜单，我使用内置的“自定义菜单”小部件。

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

1. 有什么方法可以通过仅生成 HTML 中所需的代码来优雅地完成此操作吗？要么通过在functions.php中使用一些自定义函数（我正在使用二十一个子主题），要么通过一些“高级自定义菜单”插件（如果有的话）

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;
}

Answer 2

要通过 CSS 隐藏元素，请使用 display: none; 属性。

对于菜单之类的内容，您需要在满足条件（悬停/单击）时使用 Javascript 更改隐藏元素的 css。