如果导航链接超过10个，则显示汉堡菜单

Question

我正在创建一个导航栏，如果我的导航链接超过10，即使不在移动设备中，也会显示一个汉堡图标。因为如果所有显示的导航链接，导航栏将变得凌乱，其他导航栏将无法显示。

这是我当前导航栏的代码

            <div class="main-menu-toggle">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </div>

           <div id="site-header">
            <?php
            wp_nav_menu( array(
                'theme_location'  => 'main-menu',
                'container'       => 'nav',
                'container_class' => 'site-main-menu-container',
                'menu_class'      => 'site-main-menu uninitialized',
                'menu_id'         => 'main-menu',
            ) );
            ?>

            </div>

Answer 1

您可以用length计算ul长度。

尝试以下代码。

jQuery(document).ready(function(){
    if ( jQuery('#main-menu ul li').length > 10 ) { 
        jQuery('.your-hamburger-class').show();
    }
});