【问题标题】：Wordpress - Highlight the parent menu-item when child menu item page is selected/loadedWordpress - 选择/加载子菜单项页面时突出显示父菜单项
【发布时间】：2013-03-14 07:02:33
【问题描述】：

我有一个基本菜单，其中一些菜单项有子菜单。我对 wordpress 的经验很少，现在没有时间深入研究细节。所以我的问题是，当用户导航到其中一个子菜单页面时，突出显示顶部菜单项的最简单方法是什么。（我尝试使用 javascript 和纯 css 来通过元素 id 和使用“current-cat-parent”类设置颜色属性，但都没有工作）。
非常感谢任何帮助。

注意：我正在使用一个名为 chameleon 的主题。

【问题讨论】：

标签： wordpress

【解决方案1】：

您可以将 current-menu-item 类分配给 .current-menu-ancestor 类，例如

.main_menu li.current-menu-item a, .main_menu li.current-menu-ancestor a{
    color: #777777 !important; /* highlight color */
}

它将突出显示父页面菜单

请参考this page

【讨论】：

【解决方案2】：

.current-menu-ancestor 对我不起作用。 .current-page-ancestor 做到了。

【讨论】：

【解决方案3】：

您可以在主题的 footer.php 文件中，在正文结束标记之前插入以下代码。

<!-- Highlight parent page link when on child page -->
<?php if (is_page()) {   //  displaying a child page ?>
    <script type="text/javascript">
        jQuery("li.current-page-ancestor").addClass('current-menu-item');
    </script>
<?php } ?>

它的美妙之处在于它在 PHP 中，因此代码是动态的。它所做的只是添加另一个原生 WordPress nav li 类，使当前页面的链接处于活动状态。

我在这里写了一篇简短的文章来解释它是如何工作的：How to keep parent page navigation link highlighted when viewing a child/sub page!

如果您对此有任何疑问，请随时告诉我。

【讨论】：

【解决方案4】：

我在编辑它时遇到了一点问题，但找到了一个简单的解决方案。我正在使用 Wordpress Storefront 主题，只需将其粘贴到您的子主题的 style.css 文件中即可：

li.current-menu-parent >a {
  color:red !important;
}

【讨论】：

欢迎来到 Stack Overflow！请在您发布的代码中添加一些信息。还要检查How to Answer 并采取tour

【解决方案5】：

有趣。您的解决方案突出显示了父级，但没有突出显示当前的子级。但这让我走上了正确的道路，最终，这就是我所需要的。

li.current-menu-parent >a, .current-menu-item >a {
    color: red !important;
}

【讨论】：

太棒了。我几乎一天都在寻找这个解决方案。非常感谢您提供了一个最简单的解决方案。

【解决方案6】：

这对我有用。下面的 CSS 将允许您设置活动菜单的样式...最多三个菜单。

.current-menu-ancestor{ background:RED !important; }
.current_page_parent{background:GREEN !important;}
.active{background:YELLOW !important;}

代表当前活动页面的菜单按钮将是黄色，
如果代表当前活动页面的按钮是嵌套的，它的父级将为绿色...否则菜单上的顶级按钮将为绿色。
而且最重要的是（无论在你的菜单）任何具有 .current-menu-ancestor 类的元素将使用红色背景设置样式。

也可以只设置 .current-menu-ancestor 的样式，并且任何父菜单项都将设置样式。

【讨论】：

【解决方案7】：

WordPress 5.7

经过测试和工作，2021 年

2021 年。如果你们中的任何人仍在寻找解决方案，那么就在这里。

这将突出显示父级及其子级。如果没有子菜单，则父菜单将突出显示。记住!important 是必需的。

.current-menu-parent > a,
.current-menu-item a { 
    color: blue !important; /* Important is required */
}

【讨论】：