-4

2 つのスクリプトがあります。1 つはナビゲーション バー用で、もう 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: ナビゲーション バーが修正されました

4

1 に答える 1

0

2 番目のスクリプトは、最初のスクリプトの一部の関数/値を上書きしています。これが、スクリプトが連携しない理由です。

  1. デバッガーを試して、どの部分が機能し、どこでスクリプトが失敗するかを確認してください。
  2. すべてのデータと関数を「クラス」に含めるなど、衝突を起こさないコードを書くようにしてください。
  3. タスクを実行する html 要素のみを必要とするコードを書くようにしてください。たとえば、親要素 (window.scrollTo) は使用しないでください。
于 2013-06-20T09:33:12.923 に答える