Question

我有2个脚本 1个脚本用于导航栏，另一个用于垂直滚动，但问题是当我插入垂直滚动划线时导航栏的脚本不起作用。

有没有人知道如何让2个脚本同时工作？

导航栏脚本：

<script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript" src="js/jquery-easing-1.3.pack.js"></script><script type="text/javascript" src="js/jquery-easing-compatibility.1.2.pack.js"></script>
<!--[if IE]>
<style type="text/css">.jimgMenu {position:relative;width:630px;height:200px;overflow:hidden;margin-left:20px;}</style>
<![endif]-->
<script type="text/javascript">
$(document).ready(function () {

    // find the elements to be eased and hook the hover event
    $('div.jimgMenu ul li a').hover(function () {

        // if the element is currently being animated (to a easeOut)...
        if ($(this).is(':animated')) {
            $(this).stop().animate({
                width: "310px"
            }, {
                duration: 450,
                easing: "easeOutQuad"
            });
        } else {
            // ease in quickly
            $(this).stop().animate({
                width: "310px"
            }, {
                duration: 400,
                easing: "easeOutQuad"
            });
        }
    }, function () {
        // on hovering out, ease the element out
        if ($(this).is(':animated')) {
            $(this).stop().animate({
                width: "78px"
            }, {
                duration: 400,
                easing: "easeInOutQuad"
            })
        } else {
            // ease out slowly
            $(this).stop('animated:').animate({
                width: "78px"
            }, {
                duration: 450,
                easing: "easeInOutQuad"
            });
        }
    });
});
</script>

垂直脚本：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>    
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
    $(".contactLink").click(function () {
        if ($("#contactForm").is(":hidden")) {
            $("#contactForm").slideDown("slow");
        } else {
            $("#contactForm").slideUp("slow");
        }
    });
});

function closeForm() {
    $("#messageSent").show("slow");
    setTimeout('$("#messageSent").hide();$("#contactForm").slideUp("slow")', 2000);
}

$(document).ready(function () {
    function filterPath(string) {
        return string.replace(/^\//, '')
            .replace(/(index|default).[a-zA-Z]{3,4}$/, '')
            .replace(/\/$/, '');
    }
    $('a[href*=#]').each(function () {
        if (filterPath(location.pathname) == filterPath(this.pathname) && location.hostname == this.hostname && this.hash.replace(/#/, '')) {
            var $targetId = $(this.hash),
                $targetAnchor = $('[name=' + this.hash.slice(1) + ']');
            var $target = $targetId.length ? $targetId : $targetAnchor.length ? $targetAnchor : false;
            if ($target) {
                var targetOffset = $target.offset().top;
                $(this).click(function () {
                    $('html, body').animate({
                        scrollTop: targetOffset
                    }, 1000);
                    var d = document.createElement("div");
                    d.style.height = "101%";
                    d.style.overflow = "hidden";
                    document.body.appendChild(d);
                    window.scrollTo(0, scrollToM);
                    setTimeout(function () {
                        d.parentNode.removeChild(d);
                    }, 10);
                    return false;
                });
            }
        }
    });
});
</script>

ps：我的导航栏已修复

Answer 1

您的第二个脚本正在覆盖第一个脚本的某些功能/值。这就是为什么你的脚本不能一起工作的原因。

尝试使用调试器来查看哪些部分有效以及脚本失败的位置。
尝试编写不会创建conflits的代码，例如将所有数据和函数包含到“类”中。
尝试编写只需要执行其任务的html元素的代码，例如：避免使用父元素（window.scrollTo）。

一个页面中有2个脚本

1 个答案: