Question

我正在尝试创建一个CSS＆amp;基于JS的下拉菜单。

此示例适用于所有浏览器：

http://jsfiddle.net/bqQqN/1/

然而，我想确保该项目失去焦点并在点击<body>中的其他内容后自动关闭。我正在尝试使用以下代码完成此任务：

http://jsfiddle.net/bqQqN/2/

现在，.blur函数在所有浏览器中都有效，但是当我在元素上单击两次时，和不再插入其他文本，它会关闭并再次打开，而不是仅仅关闭。

我迷失在这里。我当然希望保留.blur功能，但我想确保能保持正常的行为。

非常感谢任何帮助！

Answer 1

要再次隐藏它，将单击侦听器绑定到文档，然后您可以检查您单击的内容是否在您的下拉列表中，如果是，则返回false，如果不是则隐藏。实际上，这意味着如果您点击下拉列表中的链接以外的任何内容，它将隐藏它。

var $dropdown = $(".dropdown > dd > ul"),
    $drop_link = $(".dropdown > dt > a");

$drop_link.click(function(e) {
    $dropdown.toggle();
    e.preventDefault();
});

// Bind the click to everything
$(document).mouseup(function(e) {
    // If the dropdown is visible
    // and the thing we've clicked is not a descendent of the dropdown
    if ($dropdown.is(":visible") && $(e.target).parents('.dropdown').length == 0) {
        $dropdown.hide();
    }
});

我还更新了您的jsFiddle

Answer 2

我已经进一步更新了你的jsFiddle，以便隐藏其他打开的菜单...我还将顶层菜单项并排移动，以便打开菜单关闭更加明显。 / p>

jQuery .blur＆amp; .focus问题与CSS＆amp; JS下拉菜单

2 个答案: