1

私は少し立ち往生しています...

これを見てください：

http://jsfiddle.net/matiitas/Lgtv5/1/

以下に、JavaScript コードの一部を示します。

var stopPosition = 860;
var slidingDiv = "";
var slidingDiv2 = "";

window.onload = function () {
    document.getElementById("option").onclick = slideIt;
    slidingDiv = document.getElementById("content");
    document.getElementById("back").onclick = slideIn;

    document.getElementById("option2").onclick = slideIt2;
    slidingDiv2 = document.getElementById("content2");
    document.getElementById("back2").onclick = slideIn2;
};

function slideIt() {
    if (parseInt(slidingDiv.style.left) < stopPosition) {
        slidingDiv.style.left = parseInt(slidingDiv.style.left) + 2 + "px";
        setTimeout(slideIt, 1);
        active = true;
    }
}

JavaScript を使用してスライド メニューを作成していますが、3 つの大きな問題があります。

  1. 関数を何度も「繰り返す」必要がないように、コードを再利用するにはどうすればよいですか?
  2. メニュー「サービス」をクリックするとメニュー「ホーム」が非表示になり、その逆も同様です。
  3. 最初にクリックしてコンテンツをスライドさせ、もう一度クリックしてコンテンツを非表示にするという 2 つの動作が必要です。
4

1 に答える 1

1

1 - こんな感じ？

function slideIt(divToSlide) {
    if (parseInt(divToSlide.style.left) < stopPosition) {
        divToSlide.style.left = parseInt(divToSlide.style.left) + 2 + "px";
        setTimeout(slideIt, 1);
        active = true;
    }
}

アクティブが何をしているのかわかりません。

2 - アニメーション化されたすべての要素を配列にプッシュします。1 つを展開すると、他のものは折りたたまれます。

function slideIt(divToSlide) {
    for(var d in slidingDivs) {
        if(d != divToSlide) collapseDiv(d);
    }

    ...
}

3 - これに取り組む方法はいくつかあります。状態を追跡し、クリック ハンドラーで状態を確認します。

于 2013-04-15T00:14:50.720 に答える