Блог

Я использую 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(), он завершается с ошибкой.

если я консоль.регистрируйте переменные, консоль отображает эти узлы просто отлично, даже с ‘display: none’, который выполнял jquery .hide() — он просто фактически не скрывает div на веб-странице. Как будто jquery запускается до полной загрузки веб-сайта и консоли.журнал переменной отображает измененный 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, и они отлично работают. Это просто использование переменных js для элементов в wp_nav_menu(), которые не работают.

Есть ли что-то в wp_nav_menu, из-за чего переменные JS не работают должным образом? Нужно ли мне сделать что-то еще, чтобы страница была загружена и готова перед использованием этих переменных? Интересно, если я консоль.зарегистрируйте эти переменные, они успешно покажут мне правильный узел, Но выполнение JS (показать / скрыть и т. Д.) Не работает.