页眉与页脚中的 Javascript 冲突答案

【问题标题】：Javascript conflict in header vs footer页眉与页脚中的 Javascript 冲突
【发布时间】：2014-09-03 18:34:58
【问题描述】：

我有两个想要使用的 javascript 脚本，一个可点击的下拉菜单和一个用于图像幻灯片的 slick.js。可点击的下拉菜单仅在放置在页眉中时才有效，而光滑的仅在放置在页脚中时才有效......并且它们最终会相互冲突，一个覆盖另一个取决于调用 javascript 库的位置。例如，以下代码将只显示幻灯片：

标题：

    <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>   
    <script type="text/javascript">
        $(function() {
            // Clickable Dropdown
            $('.menu-main-menu-container > ul').toggleClass('no-js js');
            $('..menu-main-menu-container .js ul').hide();
            $('.menu-main-menu-container .js').click(function(e) {
                $('.menu-main-menu-container .js ul').slideToggle(200);
                $('.clicker').toggleClass('active');
                e.stopPropagation();
            });
            $(document).click(function() {
                if ($('.menu-main-menu-container .js ul').is(':visible')) {
                    $('.menu-main-menu-container .js ul', this).slideUp();
                    $('.menu-main-menu-container').removeClass('active');
                }
            });
        });
    </script>

页脚：

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url')?>/slick/slick.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url')?>/js/slick.js"></script>

<script type="text/javascript">
    $(document).ready(function(){
        $('.slideshow-images').slick({

        });
    });
</script>

一旦我从页脚中删除“jquery-1.11.0.min.js”，下拉菜单就会再次开始工作。我怎样才能让两者同时工作？

【问题讨论】：

只在页面中加载一次 jQuery 库，在任何依赖的插件和代码之前。也没有理由加载 2 个版本的 slick 插件，只需使用 .min 版本
如果我只加载一次 jQuery，由于某种原因它在下拉菜单上不起作用...知道为什么吗？
你在下拉代码之前加载了吗？
这里还有一个额外的.：$('..menu-main-menu-container

标签： javascript jquery header footer conflict

【解决方案1】：

你只需要加载一次 jQuery。

它停止工作的原因是当你再次加载它时，原来的 jQuery 对象被覆盖并且不再有效。但是，已经在你的 header 中执行的代码是绑定到原始对象的，这意味着当点击事件被触发时它不起作用。

解决方案：只加载一次 jQuery。

【讨论】：