Question

我已使用以下代码将活动类添加到菜单项。该网站是使用Woocommerce的99％Ecomm，我使用产品类别作为顶级导航项目。以下代码适用于在产品子类别上处于活动状态时除之外的所有项目。

＆＃13;

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;
}

＆＃13;

基本上，我希望即使选择了子类别，也要用活动类标记顶级导航项。

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>

这是fiddle

将活动类添加到woocommerce产品类别current-menu-item

1 个答案: