Question

https://css-tricks.com/examples/MagicLine/ 这是我使用的那个，但它需要<script src='//ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'></script> 但其他一些脚本需要<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>

所以我尝试的只是两者都使用它们，但随后崩溃了。

这是MagicLine代码：

<script>
            $(function() {

    var $el, leftPos, newWidth,
        $mainNav = $("#example-one");

    $mainNav.append("<li id='magic-line'></li>");
    var $magicLine = $("#magic-line");

    $magicLine
        .width($(".current_page_item").width())
        .css("left", $(".current_page_item a").position().left)
        .data("origLeft", $magicLine.position().left)
        .data("origWidth", $magicLine.width());

    $("#example-one li a").hover(function() {
        $el = $(this);
        leftPos = $el.position().left;
        newWidth = $el.parent().width();
        $magicLine.stop().animate({
            left: leftPos,
            width: newWidth
        });
    }, function() {
        $magicLine.stop().animate({
            left: $magicLine.data("origLeft"),
            width: $magicLine.data("origWidth")
        });    
    });
});
        </script>

这是另一个：

<script>
            $(document).ready(function() {
  $("body").on("click", "a", function() {
    var href = $(this).attr("href");
    if (href.indexOf("#") === 0) {
      $("html, body").animate({
        scrollTop: ($(href).offset().top - 90)
      });
      return false;
    }

  });
});
        </script>

如果我使用1.5.2，那么最后一个不会工作，所以如果我删除那个它可以工作，但MagicLine。我如何让两者一起工作？

Answer 1

您遇到此问题，因为正如您所说，您的脚本需要不同版本的jQuery。

您可以使用here所述的jQuery方法同时运行多个版本的noConflict。

然而，坏消息是，您需要编辑正在使用的脚本 - 这可能是不可能的，也可能是一个令人头痛的问题。在任何一种情况下，这都是一个维护问题。

Answer 2

只需使用较新版本的jQuery - 2.1.4 - 然后，如果需要，还可以添加jQuery Migrate脚本以支持可能依赖旧版jQuery的代码

jQuery CSS magicline

2 个答案: