javascript - 移动设备的基本 jquery 切换菜单不起作用

Question

我有一个使用 jQuery 的非常基本的切换菜单on: tap，但它不起作用：

<nav id="mobile-nav">
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        etc...
    </ul>
</nav>

<div id="anchor">
    <header>
        <img src="menu-icon.png">
    </header>
</div>

然后，

$(document).ready(function() {
    var speed = "fast";

    $("#anchor").addClass("hidden");

    $("#anchor.hidden header img").on("tap", function() {
        $("#mobile-nav").animate({
            left: "0px"
        }, speed);

        $("header").animate({
            left: "252px"
        }, speed);

        $("#anchor").removeClass("hidden");
        $("#anchor").addClass("active");
    });

    $("#anchor.active header img").on("tap", function() {
        $("#mobile-nav").animate({
            left: "-252px"
        }, speed);

        $("header").animate({
            left: "0"
        }, speed);

        $("#anchor").removeClass("active");
        $("#anchor").addClass("hidden");
    });

});

#mobile-nav是一个 div，它250px位于width并设置为absolute position带有 aleft的-252px，然后0在点击图像图标时设置为（使其滑入视图）。如您所见，一旦滑出，它应该删除hidden该类并添加一个active类。然后我设置了一个自定义tap函数将其滑回并删除active该类并hidden再次添加。它会滑出，但不会滑回。我究竟做错了什么？

Answer 1

我认为问题在于您在点击图片时触发了多个事件。尝试这样的事情：

$(document).ready(function() {
    var speed = "fast";

    $("#anchor").addClass("hidden");

    $("#anchor header img").on("click", function() {
        $('#anchor').hasClass('active') ? left = '-=252px' : left = '+=252px';
        $("#mobile-nav, header").animate({'left': left}, speed);    
        $("#anchor").toggleClass("hidden active");
    });

});

小提琴