javascript - 如果当前页面是其子页面，则显示下拉菜单项

Question

我正在 wordpress 上做一个元素，并制作一个主菜单，其中所有下拉元素都正常显示，而无需将鼠标悬停在其上。我已经隐藏了主页上的所有下拉列，如果当前页面是其子元素或主元素，我想显示特定的下拉列表。例如。

<ul class="menu">

<li class="menu-item">Page 1
<ul class="sub-menu active">
<li class="menu-item current_page_item">Page 1 Child A</li> 
<li class="menu-item">Page 1 Child B</li> 
<li class="menu-item">Page 1 Child C</li> 
</ul>
</li> 

<li class="menu-item">Page 2
<ul class="sub-menu">
<li class="menu-item">Page 2 Child A</li> 
<li class="menu-item">Page 2 Child B</li> 
<li class="menu-item">Page 2 Child C</li> 
</ul>
</li> 

<li class="menu-item">Page 3
<ul class="sub-menu">
<li class="menu-item">Page 3 Child A</li> 
<li class="menu-item">Page 3 Child B</li> 
<li class="menu-item">Page 3 Child C</li> 
</ul>
</li> 

</ul>

现在我只想显示第 1 页下拉菜单，如果用户转到第 2 页(或第 2 页子 A/B/C)，则隐藏第 1 页下拉菜单并显示第 2 页下拉菜单。

请告诉我如何通过 CSS 或 Javascript 执行此操作。 CSS 对我来说很容易。

谢谢

Answer 1

我找到了一个解决方案，因为在与许多类和 ID 进行了一番斗争之后，我终于找到了一个带有子菜单的独特类，所以我隐藏了所有子菜单

.menu-item ul
{
display: none;
}

之后，我通过

显示事件的下拉菜单

.menu-item .active {
display: block !important;
}

谢谢