在 iphone - jquery 打开/关闭嵌套导航

Question

我正在构建一个顶部有嵌套导航的移动网站。我希望在用户点击其父 li 时弹出子导航。这是我的麻烦：当点击子导航的任何其他内容时，我需要关闭它，包括最初打开它的 li。

我尝试过的：

• fadeToggle 和其他切换：子导航仅在再次点击父 li 时关闭。
• hover()：根本不会关闭子导航。

我的导航样例：

<ul>
    <li id="open"><a href="#">one</a>
        <nav><ul>...</ul></nav>
    </li>
    <li>...</li>
</ui>

这是我尝试过的悬停 jquery：

$("li#open").hover(
    function (event) { 
    event.preventDefault(); $("nav").show(); },
    function (event) { 
    event.preventDefault(); $("nav").hide(); }
);

我对 jquery 和 javascript 编写自己的函数不够满意，但必须有某种方法来编写一个可以说，除了“nav”之外的任何东西都会隐藏“nav”。任何帮助将不胜感激！

Answer 1

我会做这样的事情

$("li#open").click(function (event) { 
    // prevent default
    event.preventDefault();
    // if #open has class active, then remove it if not then add it
    if($(this).hasClass("active")) {
        $(this).removeClass("active");
    }
    else {
        $(this).addClass("active");
    }
);

$(document).click(function() {
    // if #open has class active then remove it
});

class active 应该显示菜单，默认情况下菜单不显示。这样，当您添加活动类时，菜单将显示

如果您有多个菜单项，这适用于一个菜单项，那么代码需要稍作更改。如果这仅适用于 iOS，那么您可以使用 touchstart 和 touchend 而不是 click

$("li#open").live('touchstart', function (event) { // function content }

touchstart在你触摸屏幕时触发，当你的手指离开屏幕时触发touchend