javascript - 使用 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. 我希望在单击“服务”菜单时隐藏“主页”菜单，反之亦然。
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;
    }
}

不确定 active 在做什么。

2 - 将所有动画元素插入数组中。当您展开其中一个时，折叠其他的。

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

    ...
}

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