首页 文章

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

提问于
浏览 次
1

我've used the below code to add the active class to menu items. The site is 99% Ecomm using Woocommerce and I' m使用产品类别作为顶级导航项目 . 以下代码适用于几乎所有项目，除非在产品子类别上处于活动状态 .

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

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

wordpress woocommerce

1 回答

  • 0

    我认为最好的方法是使用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

    回复于

相关问题