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

查看您更新的小提琴：http://jsfiddle.net/H3KRk/3/

此外，您的锚点至少需要一个通用类，即菜单。对于菜单以外的目的，如果需要，使用更多的类。在您的示例中，所有菜单锚点上的类都应为 clicker。

更新：

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

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

查看更新的小提琴：http://jsfiddle.net/H3KRk/4/

更新 2：

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

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

鼠标悬停在li上时需要对inner ul应用css：

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

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

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

Answer 2

改用此代码 -

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

另外，您不需要在 html 中定义 'clicker' 和 'clicker1' 类。

对于非 js 浏览器，您可以使用 @abhitalks 代码 -

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

请阅读他的回答。由于声誉低，我无法发表评论。谢谢。