Javascript 在WordPress菜单中使用JS变量失败

我使用wp_nav_menu加载WordPress菜单，如下所示：

<?php
                wp_nav_menu(
                    array(
                        'theme_location' => 'menu-1',
                        // 'menu_id'        => 'primary-menu',
                        // 'menu_class'  => 'menu-desktop',
                        'items_wrap' => '<ul id="primary-menu" class="menu-desktop">%3$s <li class="toggle-search"><i class="material-icons search-toggle-icon">search</i><div class="nav-search"><form role="search" method="get" id="searchform" action="'.home_url( '/' ).'"><input type="text" value="Search KILJ" name="s" id="s" /><button type="submit" id="searchsubmit"><i class="material-icons">search</i></button></form></div></li</ul>',
                    )
                );
                ?>

我已经尝试过测试js变量的创建，并对页面上不属于WP_NAV_菜单的项目使用这些变量，效果非常好。这只是wp_nav_menu（）中不起作用的项目的js变量用法

---

wp_nav_菜单中有什么东西使JS变量不能正常工作吗？在使用这些变量之前，我是否需要做更多的事情来要求加载页面并做好准备？有趣的是，如果我将这些变量记录到console.log中，它们会成功地向我显示正确的节点，但执行JS（显示/隐藏等）不起作用。

如何在WordPress中加载此JS代码？@mikerojas in functions.php如下：

wp\u注销脚本（'jquery'）；wp_enqueue_脚本（'jquery'，get_template_directory_uri（）。/js/jquery-3.5.1.min.js'，array（），null，true）；wp_enqueue_script（'kilj script'，get_template_directory_uri（）。/js/scripts.js'，array（'jquery'），_S_VERSION，true）

WordPress中如何加载此js代码？@mikerojas in functions.php如下：

wp\u delegister\u script（'jquery'）；wp_enqueue_脚本（'jquery'，get_template_directory_uri（）。/js/jquery-3.5.1.min.js'，array（），null，true）；wp_enqueue_script（'kilj script'，get_template_directory_uri（）。/js/scripts.js'，array（'jquery'），_S_VERSION，true）
'use strict';
$(document).ready(function(){

    var navSearchBox = document.querySelector('.nav-search');
    var searchIcon = document.querySelector('.search-toggle-icon');

    var isNavMobile = window.matchMedia( '(max-width: 1060px)' );

    // Define a callback function for the event listener.
    function handleNavMediaQueryChange( e ) {

        if ( e.matches ) {
            //show nav search on mobile
            $( navSearchBox ).show();
            $( navSearchBox ).attr( 'aria-expanded', 'true' );
            $( navSearchBox ).attr( 'aria-hidden', 'false' );
        } else {
            //hide nav search on desktop
            $( navSearchBox ).hide();
            $( navSearchBox ).attr( 'aria-expanded', 'false' );
            $( navSearchBox ).attr( 'aria-hidden', 'true' );
            $( searchIcon ).off( 'click' ).on( 'click', function(){
                var iconText = $(".nav-search").is(':visible') ? 'search' : 'close';
                $(searchIcon).text(iconText);
                $( navSearchBox ).slideToggle();
                $( navSearchBox ).attr( 'aria-hidden', $( '.nav-search' ).attr( 'aria-hidden' ) === 'false' ? 'true' : 'false' );
        
            });
        }
    }

    // Run the isNavMobile change handler once.
    handleNavMediaQueryChange( isNavMobile );

    // Add the callback function as a listener to the query list.
    isNavMobile.addEventListener( 'change', handleNavMediaQueryChange );

});