1

我正在使用 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>',
                    )
                );
                ?>

我尝试将 javascript 变量分配给“search-toggle-icon”和“nav-search”类，并使用这些变量来切换可见性。这样做是行不通的。如果我不使用 JS 变量而仅引用 css 类“search-toggle-icon”和“nav-search”，则 js 显示/隐藏有效，但如果我创建变量并尝试使用 js 变量进行显示/隐藏，它不起作用。

我创建了一个CodePen 示例，显示使用不是 wordpress 生成的菜单的变量可以正常工作，但是如果我将相同的 javascript 代码与 wp_nav_menu() 生成的菜单一起使用，它会失败。

如果我 console.log 变量，控制台会很好地显示这些节点，即使 jquery .hide() 执行了“display:none” - 它实际上并没有隐藏网页上的 div。就好像 jquery 在网站完全加载之前运行，并且变量的 console.log 显示 jquery 修改后的 html，即使修改后的 HTML（添加 display: none;）在实时 HTML 中不存在。

这是我的 javascript 代码，由于使用了两个类的变量（search-toggle-icon 和 nav-search），它不起作用。如果我将所有对这些变量的引用切换为类名，一切都会很好。

'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 );

});

我已经尝试测试 js 变量的创建，并为我的页面上不属于 WP_NAV_MENU 的项目使用这些变量，它们工作得很好。这只是 wp_nav_menu() 中不起作用的项目的 js 变量用法。

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

4

0 回答 0