CSS和JS下拉菜单中的jQuery.blur和.focus问题

我正在尝试制作一个基于CSS和JS的下拉菜单

此示例适用于所有浏览器：

但是，我想确保项目失去焦点，并在单击中的其他内容后自动关闭。我试图通过以下代码实现这一点：

现在，.blur函数在所有浏览器中都可以使用，但是不再插入其他文本，当我在元素上单击两次时，它会关闭并再次打开，而不仅仅是关闭

我在这里迷路了。我当然想保留.blur函数，但我想确保可以保持正常的行为

---

非常感谢您的帮助

若要再次隐藏它，请将单击侦听器绑定到文档，然后您可以检查您单击的内容是否在下拉列表中，如果在下拉列表中，则返回false，如果不在下拉列表中，则返回hide。实际上，这意味着，如果您单击下拉列表中链接以外的任何内容，它将隐藏该链接

var $dropdown = $(".dropdown > dd > ul"),
    $drop_link = $(".dropdown > dt > a");

$drop_link.click(function(e) {
    $dropdown.toggle();
    e.preventDefault();
});

// Bind the click to everything
$(document).mouseup(function(e) {
    // If the dropdown is visible
    // and the thing we've clicked is not a descendent of the dropdown
    if ($dropdown.is(":visible") && $(e.target).parents('.dropdown').length == 0) {
        $dropdown.hide();
    }
});

---

我还更新了你的

我进一步更新了你的，以便其他打开的菜单将隐藏…我还将顶部菜单项并排移动，以便更明显地显示打开的菜单正在关闭。

谢谢，这几乎解决了。我现在有以下问题。检查此JSFIDLE:。当我点击一个菜单时，我希望其他菜单自动关闭。我如何做到这一点_