将JS变量与WordPress菜单一起使用失败

编程问答 2022-06-06

问题描述

我正在使用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变量来执行show /隐藏，这是行不通的。

我创建了一个CodePen example，它显示了将变量与不是wordpress生成的菜单一起使用可以正常工作，但是如果我将ws_nav_menu（）生成的菜单使用SAME javascript代码，则它将失败。

如果我用console.log记录变量，则控制台会很好地显示那些节点，即使jquery .hide（）执行的“ display：none”也是如此-它实际上并没有将div隐藏在网页上。好像jquery在网站完全加载之前就运行了，即使实时HTML中不存在修改过的HTML（添加显示：none;），该变量的console.log也显示了jquery修改过的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（显示/隐藏等）是行不通的。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascriptjquerywordpresswordpresswp-nav-menu-item