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应显示菜单，默认情况下菜单显示为none。这样，当您添加类激活时，菜单将显示

如果你有多个项目，这适用于一个菜单项，那么代码需要改变一点。如果这仅适用于iOS，则可以使用touchstart和touchend而不是单击

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

当您触摸屏幕并且手指离开屏幕时会触发

触摸启动，触发触摸

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

1 个答案: