Question

我正在使用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
});

但它没有达到预期效果。

Answer 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。

Answer 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" ));
});

Answer 3

我只使用CSS进行了实验。可能是你的工作。

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

Answer 4

您可以在文档上绑定click事件以关闭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

焦点丢失时隐藏元素

4 个答案: