使用JavaScript滑动菜单

Question

我有点卡住......

看看这个：

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. 我想点击菜单“服务”时隐藏菜单“home”，反之亦然。
3. 我希望有两个行为...当第一次点击内容时滑动内容，再次点击它以隐藏内容......

Answer 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 - 将所有动画元素推送到数组中。当你展开一个时，折叠其他的。

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

    ...
}

3 - 有几种方法可以解决这个问题。跟踪状态并检查点击处理程序中的状态。