Question

我正在尝试专门为我正在创建的下拉菜单创建一个事件。如果它是可见的.is(":visible")，在任何地方点击但菜单本身都将关闭它。

---编辑---

这是行不通的。其他代码工作正常。 .on()工作正常，但以下代码并没有给我我想要的东西。

$(document).on("mouseout", "#menuPopUp", function(){
   $(document).on("mousedown", function(){
      $("#menuPopUp").hide();
   });
});

我试图隐藏#menuPopUp什么时候点击它本身。

Answer 1

您是否尝试过这种方式： http://jsfiddle.net/tTkAB/1/

$(document).on("mousedown", "#headerPicMenu", function() {
    if ($("#menuPopUp").is(":visible")) {
       $("#menuPopUp").hide();
    } else {
       $("#menuPopUp").show();
    }
});

$(document).on("mouseout", "#menuPopUp", function() {
    if ($("#menuPopUp").is(":visible")) {
       $("#menuPopUp").hide();
    } else {
       $("#menuPopUp").show();
    }
});

$("#menuPopUp").on('mousedown', function() {
   $(this).mousedown();
});

更新了答案和小提琴。

Answer 2

尝试在mouseover / mouseout上添加/删除一个类，然后在click事件中测试它;这些方面的东西：

$("#menuPopUp").mouseover(function() {
   $(this).addClass("menuover"); 
});

$("#menuPopUp").mouseout(function() {
   $(this).removeClass("menuover"); 
});

$(document).on("mousedown", function(){
    if($("#menuPopUp").is(":visible") && !$("#menuPopUp").hasClass("menuover")) {
        $("#menuPopUp").hide();
    }
});

当鼠标移动时尝试mousedown

2 个答案: