jquery - 单击时弹出元素并在 HTML 单击时隐藏

Question

我有以下 HTML 代码：

<a href="#language">English</a>
<div class="popup" id="language">
  Portuguese | English | French
</div>

单击链接时，我想打开/关闭 div。

但我还需要以下行为：

1 - 当我点击链接外的某个地方时，弹出窗口应该隐藏。

2 - 当我打开一个弹出窗口时，我希望关闭任何当前打开的弹出窗口；

我尝试了以下方法：

$('a').click(function (event) {
  event.preventDefault();
  $($(this).attr('href')).toggle();
});
$("html").click(function (event) {
  $("div.popup").hide();
});

但是 HTML 部分使我的代码停止工作。

这是一个例子：http ://codepen.io/mdmoura/pen/sAeEJ

我该如何解决？

谢谢你，米格尔

Answer 1

问题是事件传播

$('a').click(function (event) {
    $($(this).attr('href')).toggle();
    return false;
});
$("html").click(function (event) {
    $("div.popup").hide();
});

演示：小提琴