汉堡菜单在页面加载时打开片刻

Question

这是我的问题：我的移动汉堡菜单在页面加载时打开了一会儿。除此以外，它还可以根据需要发挥作用。如果我点击它关闭然后打开以及onclick。我试图 javascript 预加载，但它不起作用。 javascript 是否正确？

我的网站：retro blog

<section  class="main-nav nav-two <?php if( $menu_sticky ) echo ' sticky-header'; ?>">
<div class="container">
    <nav id="site-navigation" class="main-navigation">
        <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><!-- <?php esc_html_e( 'Primary Menu', 'wp-magazine' ); ?> -->
            <div id="nav-icon">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </div>
        </button>
        <?php
        wp_nav_menu(
            array(
                'theme_location' => 'primary',
                'menu_id'        => 'primary-menu',
            )
        );
        ?>
    </nav><!-- #site-navigation -->
</div>

这是我的 javascript 代码：

( function() {
    var container, button, menu, links, i, len;

    container = document.getElementById( 'site-navigation' );
    if ( ! container ) {
        return;
    }

    button = container.getElementsByTagName( 'button' )[0];
    if ( 'undefined' === typeof button ) {
        return;
    }

    menu = container.getElementsByTagName( 'ul' )[0];

    // Hide menu toggle button if menu is empty and return early.
    if ( 'undefined' === typeof menu ) {
        button.style.display = 'none';
        return;
    }

    if ( -1 === menu.className.indexOf( 'nav-menu' ) ) {
        menu.className += ' nav-menu';
    }

    button.onclick = function() {
        if ( -1 !== container.className.indexOf( 'toggled' ) ) {
            container.className = container.className.replace( ' toggled', '' );
            button.setAttribute( 'aria-expanded', 'false' );
        } else {
            container.className += ' toggled';
            button.setAttribute( 'aria-expanded', 'true' );
        }
    };

    function handleTabPress (e){
        if((e.keyCode === 9 || e.key === 'Tab') && !e.shiftKey){
            container.classList.remove('toggled')
            button.setAttribute('aria-expanded', 'false');
            const toggleButton = document.querySelector('.menu-toggle');
            toggleButton.setAttribute('tabindex', -1);
            toggleButton.focus()
            toggleButton.setAttribute('tabindex', 0);
            e.preventDefault();
        }
    }

    function handleSiftTabPress(e){
        if(e.shiftKey && (e.keyCode === 9 || e.key === 'Tab') && e.target.classList.contains('menu-toggle') ){
            container.classList.remove('toggled')
            button.setAttribute('aria-expanded', 'false');
        }
        
    }

    function setupResponsiveMenu (e){
        document.querySelector('#site-navigation').addEventListener('keydown', handleSiftTabPress)
        if (window.innerWidth < 992) {
        if(document.querySelector("#primary-menu > .menu-item:last-of-type > .sub-menu > .menu-item > .sub-menu > .menu-item")){
            document.querySelector("#primary-menu > .menu-item:last-of-type > .sub-menu > .menu-item:last-of-type > .sub-menu > .menu-item:last-of-type").addEventListener("keydown", handleTabPress);
        }
            else if(document.querySelector("#primary-menu > .menu-item:last-of-type > .sub-menu > .menu-item")){
            document.querySelector("#primary-menu > .menu-item:last-of-type > .sub-menu > .menu-item:last-of-type").addEventListener("keydown", handleTabPress);
        } else {
            document.querySelector("#primary-menu > .menu-item:last-of-type").addEventListener("keydown", handleTabPress);
        }

        }else{
            if( document.querySelector("#primary-menu > .menu-item:last-of-type") != null )
                document.querySelector("#primary-menu > .menu-item:last-of-type, #primary-menu > .menu-item:last-of-type > .sub-menu > .menu-item:last-of-type").removeEventListener("keydown", handleTabPress);
        }
    }

    window.addEventListener('resize', setupResponsiveMenu);
    setupResponsiveMenu();

    // Close small menu when user clicks outside
    document.addEventListener( 'click', function( event ) {
        var isClickInside = container.contains( event.target );

        if ( ! isClickInside ) {
            container.className = container.className.replace( ' toggled', '' );
            button.setAttribute( 'aria-expanded', 'false' );
        }
    } );

    // Get all the link elements within the menu.
    links = menu.getElementsByTagName( 'a' );

    // Each time a menu link is focused or blurred, toggle focus.
    for ( i = 0, len = links.length; i < len; i++ ) {
        links[i].addEventListener( 'focus', toggleFocus, true );
        links[i].addEventListener( 'blur', toggleFocus, true );
    }

    /**
     * Sets or removes .focus class on an element.
     */
    function toggleFocus() {
        var self = this;

        // Move up through the ancestors of the current link until we hit .nav-menu.
        while ( -1 === self.className.indexOf( 'nav-menu' ) ) {
            // On li elements toggle the class .focus.
            if ( 'li' === self.tagName.toLowerCase() ) {
                if ( -1 !== self.className.indexOf( 'focus' ) ) {
                    self.className = self.className.replace( ' focus', '' );
                } else {
                    self.className += ' focus';
                }
            }

            self = self.parentElement;
        }
    }

    /**
     * Toggles `focus` class to allow submenu access on tablets.
     */
    ( function() {
        var touchStartFn,
            parentLink = container.querySelectorAll( '.menu-item-has-children > a, .page_item_has_children > a' );

        if ( 'ontouchstart' in window ) {
            touchStartFn = function( e ) {
                var menuItem = this.parentNode;

                if ( ! menuItem.classList.contains( 'focus' ) ) {
                    e.preventDefault();
                    for ( i = 0; i < menuItem.parentNode.children.length; ++i ) {
                        if ( menuItem === menuItem.parentNode.children[i] ) {
                            continue;
                        }
                        menuItem.parentNode.children[i].classList.remove( 'focus' );
                    }
                    menuItem.classList.add( 'focus' );
                } else {
                    menuItem.classList.remove( 'focus' );
                }
            };

            for ( i = 0; i < parentLink.length; ++i ) {
                parentLink[i].addEventListener( 'touchstart', touchStartFn, false );
            }
        }
    }( container ) );
}() );

有什么问题？也许 aria-expanded item 是错的？谢谢你的回答。

Answer 1

您可以将wp_nav_menu 中的参数作为menu_class 传递。试试下面的代码。

wp_nav_menu(
    array(
        'theme_location' => 'primary',
        'menu_id'        => 'primary-menu',
        'container'      => 'ul',
        'menu_class'     => 'menu nav-menu'
    )
);

或者你可以添加CSS

#primary-menu.menu {
    display:none;
}