Question

当我点击Google等更多选项时，我需要一个下拉菜单。它正在工作，但是当我在div外面点击时它处于非活动状态。当我点击div之外时，我想切换菜单。

我的javascript：

$('#other').click(function() {
    $(this).toggleClass('active');
    $(this).next('.dropdown').toggle();
    return false;
});
$('.dropdown a').click(function() {
    return false;
});

Answer 1

您可以订阅document.click并关闭事件处理程序中的菜单。停止从下拉列表中传播事件，以便在下拉菜单中单击时不会关闭。

$('.dropdown').click(function (event) {
    event.stopPropagation();
    return false;
});

$(document).click(function (event) {
    if ($('.dropdown').is(':visible')) {
        $('.dropdown').toggle();
        $('#other').toggleClass('active');
    }
});

您的fiddle已更新。

Answer 2

从这个answer

得到了一个想法

$(document).mouseup(function (e)
{
    var container = $("#other");

    if (!container.is(e.target) // if the target of the click isn't the container...
        && container.has(e.target).length === 0) // ... nor a descendant of the container
    {
        container.toggle();
    }
});

我的想法，它不应该切换，更好的显示/隐藏机制。

onclick切换下拉按钮

2 个答案: