Javascript页眉与页脚的冲突

Javascript conflict in header vs footer

本文关键字：冲突 Javascript      更新时间：2023-09-26

我想使用两个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。

它停止工作的原因是因为当你第二次加载它时，原来的jQuery对象被覆盖，不再有效。但是，已经在头文件中执行的代码与原始对象绑定在一起，这意味着当click事件被触发时，它不起作用。

解决方案:只加载jQuery一次

相关文章：