javascript - onclick 下拉菜单回退到悬停，处理多个菜单项

Question

一直在尝试获取它，以便我在点击时有一个下拉菜单下拉菜单，如果您没有启用 javascript，那么它会使用常规的鼠标悬停。

但是，我无法让它在多个菜单项上工作，所以现在只能点击一个菜单，然后再往下看相同的内容。

我做错了什么？请参见下面的示例。

FIDDLE

代码:

$(function() {
    // Clickable Dropdown
    $('.nav > ul').toggleClass('no-js js');
    $('.nav .js ul').hide();
    $('.nav .js').click(function(e) {
        $('.nav .js ul').slideToggle(200);
        $('.clicker').toggleClass('active');
        $('.clicker2').toggleClass('active');
        e.stopPropagation();
    });
    $(document).click(function() {
        if ($('.nav .js ul').is(':visible')) {
            $('.nav .js ul', this).slideUp();
            $('.clicker').removeClass('active');
            $('.clicker2').removeClass('active');
        }
    });
});

Answer 1

你把事情搞得太复杂了。您只需要这样的东西:

$(".nav .js").find(".clicker").on("click", function() {
   $('.nav .js ul').hide();
   $(this).next("ul").toggle();
});

查看更新后的 fiddle :http://jsfiddle.net/H3KRk/3/

此外，您需要至少有一个用于 anchor 的通用类，即菜单。对于菜单以外的用途，请根据需要使用更多类。在您的示例中，该类应该是所有菜单 anchor 上的 clicker。

更新:

为了在菜单本身之外单击时隐藏菜单，您需要获取目标(使用文档上的事件委托(delegate))，然后仅将此例程应用于该目标 anchor 。像这样:

$(document).on("click", function(e) {
    var $elem = $(e.target);
    if ($elem.hasClass('clicker')) {
       $('.nav .js ul').not($elem.next('ul')).hide();
       $elem.next("ul").slideToggle();
    } else {
       $('.nav .js ul').hide();
    }
});

查看更新的 fiddle : http://jsfiddle.net/H3KRk/4/

更新 2:

现在，让您回退到 CSS。你走在正确的轨道上。只需对您的 CSS 稍作调整即可。

查看此更新 2: http://jsfiddle.net/H3KRk/5/

悬停在 li 上时需要在内部 ul 上应用 css:

.nav > .no-js > li:hover > ul {
    display:block;
}

而不是你代码中的 .nav .no-js:hover ul。

希望能帮助您解决所有问题。