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;
    }
}

不确定主动在做什么。

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

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

    ...
}

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