Question

大家好我已经在JSfiddle上做了一个响应式导航。

效果很好;但我只是想知道是否有改进我所做的事情。我是jquery的新人，所以所有帮助都赞赏http://jsfiddle.net/kX7b6/1540/

$(document).ready(function () {
$(".menu").click(function () {
    $('#menu').animate({
        'left': '0px'
    });
});
$("#close").click(function () {
    $('#menu').animate({
        'left': '-100px'
    });
});
$(".menu").click(function () {
    $('#container').animate({
        'left': '100px'
    });
});
$("#close").click(function () {
    $('#container').animate({
        'left': '0px'
    });
});

}）;

Answer 1

直接你可以删除两个点击处理程序并结合他们的行动：http://jsfiddle.net/TrueBlueAussie/kX7b6/1543/

此外，您不需要将px字符串值与animate一起使用。假设数字为像素：

$(".menu").click(function () {
    $('#menu').animate({
        'left': 0
    });
    $('#container').animate({
        'left': 100
    });
});
$("#close").click(function () {
    $('#menu').animate({
        'left': -100
    });
    $('#container').animate({
        'left': 0
    });
});

Answer 2

上层代码中有一个简单的问题。（仅当您对功能感兴趣时。请忽略此问题）

试试这个：

单击“菜单”并打开MEnu侧。
现在点击＆＃39; MEnu＆＃39;再次链接约10次。
现在点击“关闭”＆＃39;链接在打开的菜单栏中。

预期结果：菜单栏将关闭。

实际结果：这几秒钟不会关闭。

原因：正如您一直点击菜单＆＃39;链接一次又一次地建立一个动画队列，所以首先动画队列将被执行并在完成之后。＆＃39;关闭＆＃39;链接动画将开始。

解决方案：

 $(".menu").click(function () {
    $('#menu').stop(true,true).animate({
        'left': 0
    });
    $('#container').stop(true,true).animate({
        'left': 100
    });
});
$("#close").click(function () {
    $('#menu').stop(true,true).animate({
        'left': -100
    });
    $('#container').stop(true,true).animate({
        'left': 0
    });
});

完成后，使用.stop（true，true）清除动画队列。

以下是api jQuery stop() Api

我希望这会有所帮助。

任何改进菜单代码的方法

2 个答案: