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

Posted 2023-02-25

【中文标题】移动设备的基本 jquery 切换菜单不起作用

【英文标题】：Basic jquery toggle menu for mobile not working

【发布时间】：2013-09-20 22:46:59

【问题描述】：

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

【问题讨论】：

你在某个地方找到了它吗？

尝试更改为点击事件，看看是否会触发。 Tap 是 jQuery Mobile 专有的，在 jQuery 中不存在，我不认为。

好的，我会试试的，但我也在使用 jquery mobile。更新：不。结果与tap

相同

【参考方案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

【讨论】：

就是这样！非常感谢你。 :)