Question

我目前有以下脚本：

哪个工作正常，即如果点击其中一个导航，它会下降，如果点击另一个导航，现有下拉列表消失，另一个下拉列表出现，如果我点击文档上的任意位置，无论打开哪个导航，将消失。

如何添加鼠标悬停，以便其他导航自动下降，如果已经删除了另一个导航。但是，如果没有下拉导航，要导致下拉列表，必须单击它以进行下拉，依此类推。

Answer 1

可能的解决方案：

虽然我赞成使用CSS样式的<ul>来控制.active状态，因此Javascript会变得更简单，例如：

function makeActive(el) {
    $('.menu .active').removeClass('active');
    $(el).parent().addClass('active');
}

$('.menu li a').click(function() {
    makeActive(this);
});

$('.menu li a').hover(function() {
    if ($('.menu .active').length == 0) {
        return;
    }
    makeActive(this);
});

Answer 2

如果我理解正确，您想使用.hover()

$('.navigation').click(function(event) {
    $(this).siblings('.navigation.active').click();
    $(this).toggleClass('active').next().toggle();
    event.stopPropagation();
}).hover(function() {
    $(this).siblings('.navigation.active').click();
    $(this).toggleClass('active').next().toggle();
}, function() {});

更新了fiddle。

鼠标悬停导航如果下拉

2 个答案: