css - 菜单在单击该部分之前不会展开的 CSS 导航

Question

我正在尝试为 Wordpress 创建一个导航，就像下面链接中的导航一样。

基本上导航不会扩展。如果用户是该部分，它仅显示子链接。在上面的链接中，示例将是该"Service"部分。只有单击时才会显示子链接"Service"。客户端在 Dreamweaver 中使用 Dreamweaver 模板和可编辑区域完成了此操作，但它在 Wordpress 中不起作用。

任何帮助将不胜感激。我已尝试导航，但子链接都显示如下链接。

对于所有有帮助的人，提前谢谢你。

score 1 · Accepted Answer

像这样的“应该”工作（您可能需要调整选择器）：

.menu ul ul {
    display: none;
}
.menu ul .current_page_item ul, .menu ul .current_page_ancestor ul {
    display: block;
}

这里的关键是隐藏所有子菜单.menu ul ul并使用.current_page_item父元素上的来显示正确的子菜单。

score 0 · Accepted Answer

最简单的方法是为正文或包装元素提供当前页面的 ID，如下所示：

<body id="services">

列表项是一个类，默认情况下是隐藏的：

<ul class="nav">
    <li>Services</li>
    <li class="nav-section services-section">
      <a href="#">My link</a>
    </li>
</ul>

然后在 CSS 中查找：

.nav-section { display: none; }
#services .services-section { display: block; }

当然还有更多动态的方法，比如检查 PHP 中的每个页面，但我认为这是一个快速、合适的解决方案

2 回答 2