如何隐藏完整的菜单，除了具有当前菜单祖先的项目外

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 (悬停/单击)。