Question

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

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

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

CODE：

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

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

onclick下拉菜单，后退为悬停，处理多个菜单项

2 个答案: