失去焦点时隐藏元素答案

【问题标题】：Hide element when focus lost失去焦点时隐藏元素
【发布时间】：2012-03-31 00:11:26
【问题描述】：

我正在使用 css 和 jquery 制作下拉菜单。我希望一直打开菜单，直到我单击某些内容或单击退出菜单。

这是我尝试过的：

$('#optionButton').click(function() {
$('#dropMenu').css('visibility' , 'visible')    //optionButton clicked, menu visible
});

$('*').not('#optionButton').click(function() {
$('#dropMenu').css('visibility' , 'hidden') //clicked eanithing else: menu close
});

但它并没有按我的预期工作。

【问题讨论】：

标签： javascript jquery css drop-down-menu show-hide

【解决方案1】：

当您单击一个 DOM 对象时，它会进行事件冒泡，这意味着它从最具体的对象开始并在 DOM 树上冒泡，直到到达document 对象。您可以通过返回 false 来防止事件冒泡 DOM 树。

$(document).click(function() {
  $('#dropMenu').hide();
});

$('#optionButton').click(function() { 
  $('#dropMenu').show();
  return false;
});

注意我是如何使用hide 和show 方法而不是css('visibility' , 'visible/hidden')。这两个实际上是do slightly different things，如果你只是想隐藏一个元素，hide 方法是 jQuery 中最简单的方法。

你可以看到working example of this on jsFiddle。

【讨论】：

【解决方案2】：

试试这个：

$("body").click(function(e) {
    if ( e.target.id === "optionButton" ) {
        $("#dropMenu").css("visibility", "visible");
    }
    else {
        $("#dropMenu").css("visibility", "hidden");
    }
});

或者，同一事物的较短版本：

$("body").click(function(e) {
    $("#dropMenu").css("visibility", ( e.target.id === "optionButton" ? "visible" : "hidden" ));
});

【讨论】：

【解决方案3】：

我只使用 CSS 进行了实验。可能对你有用。

查看http://jsfiddle.net/ZuLHb/1/

【讨论】：

【解决方案4】：

你可以在文档上绑定一个点击事件来关闭mùeny：

$(document).click(function() {
    $('#dropMenu').css('visibility' , 'hidden') //clicked eanithing else: menu close
});

重要的部分是你在#optionButton的点击事件上停止事件传播，否则事件将冒泡到文档并执行附加到它的点击处理程序：

$('#optionButton').click(function(e) {
    $('#dropMenu').css('visibility' , 'visible')    //optionButton clicked, menu visible
    e.stopPropagation();
});

DEMO

【讨论】：

虽然$('#optionButton').click 需要return false。
实际上需要停止传播。