Question

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

HEADER：

    <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>

FOOTER：

<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>

我一删除＆＃34; jquery-1.11.0.min.js＆＃34;从页脚下拉菜单再次开始工作。我怎样才能让两者同时工作？

Answer 1

您只需加载一次jQuery。

它停止工作的原因是因为当你第二次加载它时，原始的jQuery对象会被覆盖并且不再有效。但是，已经在标题中执行的代码与原始对象相关联，这意味着在触发click事件时它不起作用。

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

标题与页脚中的Javascript冲突

1 个答案: