首页 > 解决方案 > 移动导航javascript问题

问题描述

我花了一天的大部分时间来尝试让移动菜单在我的 Wordpress 网站上运行。汉堡菜单看起来不错,但与我使用此菜单的另一个站点不同,这个菜单不起作用。我相当确定它的 javascript 问题,但我没有收到任何控制台错误或 VS 代码中的任何错误。任何帮助将不胜感激。

<section class="header-nav">
            <div class="container borders">
                <nav id="site-navigation" class="main-navigation">
                    <!-- <button class="menu-toggle" aria-controls="topics-menu" aria-expanded="false"><?php esc_html_e( 'Topics Menu', 'mystic' ); ?></button> -->
                    <?php
                    wp_nav_menu(
                        array(
                            'theme_location' => 'menu-2',
                            'menu_id'        => 'topics-menu',
                        )
                    );
                    ?>
                </nav><!-- #site-navigation --> 
            </div>      

            <nav id="mobile-navigation" class="main-navigation">
                    <!--<button class="menu-toggle" aria-controls="topics-menu" aria-expanded="false"><?php esc_html_e( 'Topics Menu', 'mystic' ); ?></button>-->
                    <?php
                    wp_nav_menu(
                        array(
                            'theme_location' => 'menu-2',
                            'menu_id'        => 'topics-menu',
                        )
                    );
                    ?>                  
                    
        </nav>
<!-- #site-navigation -->
        </section>

        

Javascript:

        class Header {
    constructor(){
        this.burger = document.querySelector('.burger')
        this.nav = document.querySelector('#mobile-navigation')

        this.events()

    }

    events(){
        this.burger.addEventListener('click', (e)=> {
            this.toggleBurger(e)
        })

        window.addEventListener('resize', (e) => {
            this.handleWindowResize()
        })
    }

    toggleBurger(e){ 
        jQuery(this.nav).slideToggle();
        jQuery(this.burger).toggleClass('open');
    }

    handleWindowResize(){
        if(window.innerWidth > 768){
            jQuery(this.nav).slideUp()
            jQuery(this.burger).removeClass('open');
        } else {
            // jQuery(this.nav).slideUp()
            // jQuery(this.burger).removeClass('open');
        }
    }

 
}


export default Header

标签: javascriptphpwordpress

解决方案


推荐阅读