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是250px中width的div，设置为absolute position left -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");
    });

});

Fiddle

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

1 个答案: