Javascript 与 PHP 冲突

Question

我不确定是什么导致我的移动菜单系统出现问题。

我有两个页面具有相同的功能，可以将导航系统压缩到一个移动菜单中（下图）

<script type="text/javascript">
$(document).ready(function() {
    $('.main_nav nav ul').clone().appendTo('.top_menu');
    $('.sec_nav nav ul').clone().appendTo('.top_menu');
    $('.bottom-links ul').clone().appendTo('.top_menu');
    $('.footer-links ul').clone().appendTo('.top_menu');
    $('.rfi_nav').clone().appendTo('.m_form');

    // For Menu-----------------
    $('.menu, .m_close, .rfi_nav label.title').click(function(e) {
        $('body').toggleClass('m_open');
    });

    // For Menu On window resize------------------
    function checkwindowSize() {
        var windowSize = $(window).width();
        if(windowSize > 320 && windowSize < 1023) {           
            //$('body').toggleClass('open');
        }
        else{ 
            $('body').removeClass('m_open');      
        }
    }
    checkwindowSize();
    $(window).resize(function(){ checkwindowSize() });

    // For BT Select DropDown-----------------
    $('select').selectpicker();

    // For content Scroll bar-----------------
     (function($){
        $(window).load(function(){
            $(".scroll").mCustomScrollbar({
                scrollButtons:{enable:true,scrollType:"continuous",scrollSpeed:40,scrollAmount:40},
                advanced:{updateOnBrowserResize:true, updateOnContentResize:true, autoExpandHorizontalScroll:true, autoScrollOnFocus:true }
            });
        });
    })(jQuery);

    // BT Accordian------------
    function toggleChevron(e) {
        $(e.target)
            .prev('.panel-heading')
            .find("i.indicator")
            .toggleClass('glyphicon-plus glyphicon-minus');
    }
    $('#accordion').on('hidden.bs.collapse', toggleChevron);
    $('#accordion').on('shown.bs.collapse', toggleChevron);


});
</script>

我的脚本在我的主页上运行完美 (http://dev.oru.edu) but my internal pages (http://dev.oru.edu/generic-hf.php and http://dev.oru.edu/generic-hfs.php) 似乎在某处发生冲突，我无法检测到哪里或为什么。

有人可以帮我确定是什么导致了导致我的移动菜单无法加载的冲突吗？我不熟悉 JavaScript 所以我在摸索，不想把原始开发人员的代码弄乱，因为它仍在主页上工作。

我能够检测到的最深的问题是，问题不仅限于移动设备，而且在缩放到移动尺寸时也适用于桌面浏览器。起初我认为这可能与设备类型有关，但桌面浏览器也一直存在这个问题。

Answer 1

我的主要 jquery 库中有一个 "async"，导致函数无法正确加载库。

Answer 2

看错误控制台很能说明问题：

您的许多脚本依赖于 JQuery 在之前被加载运行。您正在加载 JQuery，但它是异步加载的：

<script async type="text/javascript" src="js/1.11.3.jquery.min.js"></script>

然后您的脚本会立即调用尚未加载的 window.$ 和 window.jQuery。

删除 async 属性，它应该可以工作。

Javascript 与 PHP 冲突

Javascript Conflict with PHP

javascript

php

html

css