javascript - 单击元素外部的任意位置时隐藏元素

Question

我试图在您点击元素之外的任何地方时隐藏该元素。

这是当您点击左上角的 CART 链接时出现的下拉菜单。我似乎面临的问题有两个。

1) 当您单击该按钮中除 CART 以外的任何内容时，它会显示然后隐藏 .cart-dropdown DIV。我猜这是因为我没有在这段代码中定位正确的类:

$(document).click (function (e) {
  if (e.target != $('.cart-dropdown')[0] && e.target != $('.cart-nav-item')[0] && e.target != $('.cart-full')[0]) {
    $('.cart-dropdown').hide();
  }
});

2) 当您在 .cart-dropdown DIV 中单击时，它也会关闭，这是我想避免的。同样，这一定与我在上述代码段中的语法/逻辑错误有关。

有人可以指出我正确的方向吗？

谢谢。

Answer 1

如果您改变检查类和元素的方式，它将起作用。使用以下代码查看此 fiddle 以获取工作示例:

https://jsfiddle.net/freginold/kv44k1uu/

HTML:

<div>
  A div
</div>
<br>
<div id='cart' class='cart-dropdown'>
  Cart
</div>
<br>
<div>
 Another Div
</div>

CSS:

div {
  border: 1px solid blue;
  margin: 5px;
  display: inline-block;
}

JavaScript:

$(document).click (function (e) {
//alert($(e.target).hasClass("cart-dropdown"));
  if (!$(e.target).hasClass('cart-dropdown') && !$(e.target).hasClass('cart-nav-item') && !$(e.target).hasClass('cart-full')) {
    $('.cart-dropdown').hide();
  }
});

您走在正确的轨道上；您只需像@Our_Benefactors 所说的那样通过 jQuery 定位元素，然后更改检查元素类的方式。