单击下拉菜单并在悬停时返回，处理多个菜单项。

Question

一直试图得到它，以便我有一个下拉菜单下拉菜单点击，如果你没有启用javascript，所以它使用常规鼠标。

但是，我不能让它在不止一个菜单项上工作，所以它现在是这样点击一个菜单，所以全部用相同的内容下去。

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

小提琴

代码：

$(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上悬停时，需要在内部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;
}

请读他的答案。我不能对此发表评论，因为声誉很低。谢谢。