手机的基本jquery切换菜单不起作用

Basic jquery toggle menu for mobile not working

本文关键字：菜单 不起作用 jquery 手机      更新时间：2023-09-26

我有一个非常基本的切换菜单，使用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，它以width 250px，并设置为left为 -252px 的absolute position，然后在点击图像图标时设置为0（使其滑入视图）。如您所见，一旦它滑出，它应该删除hidden类并添加一个active类。然后，我设置了一个自定义tap函数以将其向后滑动并删除active类并再次添加hidden。它会滑出，但不会滑回去。我做错了什么？

我认为

问题是您在图像点击时触发了多个事件。尝试这样的事情： 

$(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");
    });
});

小提琴

相关文章：