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) 上完美运行，但我的内部页面(http://dev.oru.edu/generic-hf.php 和 http://dev.oru.edu/generic-hfs.php)似乎在某处发生冲突，我无法检测到哪里或为什么。

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

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

Answer 1

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

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

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

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

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