WordPress JQuery Проблемы с пользовательским файлом PHP

Question

Я создал собственное мегаменю с вкладками для использования на моем веб-сайте.

Я добавляю его в 'header.php' следующим образом:

<div class="menubar">
    <?php
        include "main-menu.php";
    ?>
</div>

файл menu.phpсоставлен так (упрощенно):

<nav class="content">
    <ul class="exo-menu">
        <li class="active menhome"><a href="/" class="menhme"><i class="glyphicon glyphicon-home"></i> Home</a></li>
        <li class="mega-drop-down"><a href="#" onclick="return false"><i class="fa"></i> Brands</a>
            <div id="wrapper" class="animated fadeIn mega-menu hidden">
                <div class="mega-menu-wrap">
                    <div class="row">
                        <div class="container-fluid">
                        <!-- Tab panes -->
                            <div class="tab-content">
                                <div class="tab-pane active" id="Featured">
                                    <ul class="nav-list list-inline list-inline2">
                                        <li><a data-filter=".89" href="/brand/brand-1/"><img src="https://www.example.com" alt="img"><span></span></a></li>                                          
                                    </ul>
                                </div>
                                <div class="tab-pane" id="AtoF">
                                    <ul class="nav-list list-inline col-md-2">                                
                                        <li><a href="/brand/brand-a/"><span>BRAND A</span></a></li>
                                    </ul>
                                </div>
                                <div class="tab-pane" id="GtoN">
                                    <ul class="nav-list list-inline col-md-2">
                                        <li><a href="/brand/brand-g/"><span>BRAND G</span></a></li>
                                </div>
                                <div class="tab-pane" id="OtoW">
                                    <ul class="nav-list list-inline col-md-2">
                                        <li><a href="/brand/brand-o/"><span>BRAND O</span></a></li>                                                                            
                                    </ul>                         
                                </div>
                            </div>
                        </div>
                        <!-- Nav tabs -->
                        <ul class="nav nav-tabs" role="tablist">   
                            <li   class="active change"><a href="#Featured" role="tab" data-toggle="tab">Featured</a></li>
                            <li class="change"><a href="#AtoF" role="tab" data-toggle="tab"># - F</a></li>
                            <li class="change"><a href="#GtoN" role="tab" data-toggle="tab">G - N</a></li>
                            <li class="change"><a href="#OtoW" role="tab" data-toggle="tab">O - Z</a></li>
                        </ul>
                    </div>
                </div>  
            </div>
        </li>
        <li class="mega-drop-down mega-drop-down-2"><a href="#" onclick="return false"><i class="fa"></i> CATEGORIES</a>
            <div id="wrapper2" class="animated fadeIn mega-menu mega-menu2 hidden">
                <div class="mega-menu-wrap">
                    <div class="row">
                        <div class="container-fluid">
                        <!-- Tab panes -->
                            <div class="tab-content">
                                <div class="tab-pane active">
                                    <ul class="nav-list list-inline col-lg-12">
                                        <ul class="nav-list list-inline col-md-4">
                                        <li class="dropdown-header"><a href="/product-category/a/">A</a></li>
                                    </ul>
                                </div>    
                            </div>
                        </div>
                    </div>
                </div>  
            </div>
        </li>
    </ul>
</nav>

Теперь к проблеме ... Wordpress загружает JQuery по умолчанию, и мое меню требует, чтобы JQuery работал при наведении курсора на вкладки - Бренды, категории ...JQuery активирует раскрывающееся мега-меню.

Однако мой файл menu.php, похоже, не принимает загруженный по умолчанию файл JQuery.

В результате я добавил в заголовок.php:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Это затем решает проблему для моего файла menu.php.

Но тот факт, что я вызываю дополнительный файл JQuery в заголовке, кажется, вызывает конфликты сдругие разделы сайта.

Есть ли способ заставить мое меню использовать JQuery по умолчанию, который загружается через WordPress?

Я добавил код в нижней части меню.PHP-файл, чтобы позволить вкладки работать, этот код работает как для меня меню рабочего стола иСделал также дополнительный скрипт для моего мобильного меню:

<script type="text/javascript">
    $('#toggle-search').on('click', function() {
      $('#searchform').toggle('display: inline-block');
    });
</script>

<script>
    $(document).ready(function(){ 
    $('#wrapper').removeClass('hidden');
    });
    $(document).ready(function(){ 
    $('#wrapper2').removeClass('hidden');
    });
    $(document).ready(function(){ 
    $('#wrapper3').removeClass('hidden');
    });
    $(document).ready(function(){ 
    $('#wrapper4').removeClass('hidden');
    });

    jQuery(document).ready( function ( $ ){
        $(".change>a").hover( function () { 
            $(this)[0].click();
        }, 
        function () {
        /* code for mouseout */
        });
    }); 

        var acc = document.getElementsByClassName("mega-drop-down, drop-down");
        var i;
        for (i = 0; i < acc.length; i++) {
            acc[i].onclick = function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight){
        panel.style.maxHeight = null;
    } 
    else {
        panel.style.maxHeight = panel.scrollHeight + "px";
    }    
}
}

</script>

Answer 1

Пожалуйста, убедитесь, что ваш jQuery.min.js загружен в разделе.Может быть, ваша тема или плагин, который использует jQuery, загружает его в нижний колонтитул.(если jQuery загружен после вашего кода, он не будет работать). Пожалуйста, попробуйте следующий код, чтобы принудительно загрузить jQuery в секцию заголовка.

function insert_jquery(){
    wp_enqueue_script('jquery', false, array(), false, false);
}
add_filter('wp_enqueue_scripts','insert_jquery',1);