将活动类添加到当前菜单项中

Question

我使用下面的代码将活动类添加到菜单项。该网站是99%使用WooCommerce的Ecomm，我使用产品类别作为顶级导航项目。下面的代码适用于几乎所有项目，除非在产品子类别上处于活动状态。

add_filter('nav_menu_css_class' , 'special_nav_class' , 10 , 2);

function special_nav_class ($classes, $item) {
    if (in_array('current-post-ancestor', $classes) || in_array('current-page-ancestor', $classes) || in_array('current-menu-item', $classes) ){
        $classes[] = 'active ';
    }
    return $classes;
}

本质上，我希望顶层导航项被标记为活动类，即使选择了子类别。

Answer 1

我认为最好的应用是使用javascript或jQuery，假设你的菜单是这样的：

<nav>
    <ul>
        <li><a href="">Top level</a></li>
        <li><a href="">Top level</a></li>
        <li><a href="">Top level</a>
            <ul>
                <li><a href="">Sub category</a></li>
                <li><a href="">Sub category</a></li>
                <li class="active"><a href="">Sub category</a></li>
                <li><a href="">Sub category</a></li>
            </ul>
        </li>
        <li><a href="">Top level</a></li>
        <li><a href="">Top level</a></li>
    </ul>
</nav>

我们需要做的就是检查哪一个顶级菜单中有一个类为active的li，因此我们的jquery代码如下所示：

<script>
    jQuery(document).ready(function(){
        // Adding class "active" to all top-level menus that contain an li.active item
        $('nav > ul > li').each(function(){
            if( $(this).has('li.active').length ) {
                $(this).addClass('active');
            }
        });
    });
</script>

这是一把小提琴