Javascript在外部单击时隐藏菜单

我得到了以下html：

<div id="otherdiv"></div>
 <div class="overlay">
  <div class="menu">
    <ul>
      <li><a href="#">Val1</a></li>
     <li><a href="#">Val2</a></li>
    </ul>
   </div>
</div>

---

我需要在用户单击其外部某处时隐藏我的

.overlay

，并在用户单击

#otherdiv

时显示它。当我将事件附加到

文档

并单击

otherdiv

时，我的覆盖显示，然后立即隐藏。如何纠正这种行为？谢谢。

在

文档上。单击
检查
事件。目标
是否不是
\otherdiv
或不是
\otherdiv
和
事件的子项。目标
不是
。覆盖
或其子项，然后隐藏
$（.overlay”）

示例代码段。为
#otherdiv
和
.overlay
添加了css。仅当用户单击外部时，覆盖才会隐藏


$（文档）.ready（函数（）{
$（'#otherdiv'）。on（'mouseup'，函数（e）{
e、 预防默认值（）；
左侧变量=e.clientX+“px”；
var top=e.clientY+“px”；
var div=$（'.overlay'）；
div[0]。style.left=左；
div[0]。style.top=top；
$（“.overlay”）.show（200）；
});
$（文档）。在（'单击'）上，函数（e）{
如果（！$（'otherdiv'）.is（e.target）&&&$（'otherdiv'）.has（e.target）。长度==0&&！$（'overlay'）。is（e.target）&&&&（'overlay'）。has（e.target）。长度==0）{
$（'.overlay'）.hide（200）；
}
});
});
#其他div{
宽度：100%；
高度：50px；
背景：ddd；
}
.覆盖{
背景：红色；
}

单击此处显示




单击
并同时触发
鼠标

jQuery处理动画的一个有趣之处是它将东西放入队列中-因此，您的
hide（）
动画在
show（）
后排队运行200毫秒，即使这两个函数同时启动

相反，我建议使用一次点击事件-

$(document).on('click', function(e) {
    if(event.target.id == 'otherdiv' && !$('.overlay').is(":visible")) {
       //do stuff to show
    }
    else if($('.overlay').is(":visible")) {
        $('.overlay').hide(200);
    }
});

第一个
if
检查以确保id为
otherdiv
的元素已被单击，并且覆盖当前不可见。下一个if检查是否有单击，覆盖是否可见。
您可以在（'mouseleave'）
@iamdevlinph上执行用于悬停的

$(document).on('click', function(e) {
    if(event.target.id == 'otherdiv' && !$('.overlay').is(":visible")) {
       //do stuff to show
    }
    else if($('.overlay').is(":visible")) {
        $('.overlay').hide(200);
    }
});