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>

现在，我只想显示Page 1下拉菜单，如果用户转到Page 2（或Page 2 Child A / B / C），则隐藏Page 1下拉菜单并显示Page 2下拉菜单。

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

谢谢

Answer 1

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

.menu-item ul
{
display: none;
}

之后，我通过

显示活动的下拉菜单

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

谢谢

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

1 个答案: