Jquery 多个下拉列表：处理它们的正确方法是什么？

我必须建立一个小的下拉系统，点击触发。我已经掌握了如何处理“点击退出div”的问题（多亏了之前发布的问题）

我可以隐藏当前下拉菜单，单击另一个下拉菜单的触发器或在下拉菜单外部单击。因此，问题在于：

点击当前下拉菜单的触发器，它是无用的；当其他东西正常工作时，下拉列表不会消失

在当前下拉列表中单击（例如，.divider项），会导致下拉列表消失

下面是html代码（假设我在标题中有多个下拉列表）

当我重新点击它的触发器时，为什么你认为下拉列表没有隐藏？因为在

$（“.nav>li>a”）.on（）

内做着几乎相同的事情

此外，还有一种方法可以防止在单击某些子项时下拉菜单隐藏自身？但也许这与另一个问题更相关，我不知道

最后但并非最不重要的一点：在你看来，这是做整件事的正确方式吗

提前谢谢大家

---

编辑：多亏了@Beetroot，我设法解决了这个问题，下面是当前的工作代码 $（文档）.ready（函数（）{

“秘密”是对.not（）的巧妙使用，我现在更明白了

我只是把目标（可以

或

）改成一个更通用的目标。不确定长期的表现，但肯定是一个很好的起点

从

到

还有，这里

$（this）.最近（“.nav”）.find（“.dropdown menu”）.not（。。。 我把它做得像这样更一般 $（“.dropdown menu”）。不是（。。。 这是因为我想隐藏所有打开的下拉列表。之前的行为只考虑了一种目标和一个源区域（例如：可能我需要在标题中以及在内容中的某种工具栏中使用这些下拉列表）

---

编辑2：@Beetroot Beetroot再次帮助了我。正如他所建议的，当我在JSFIDLE中移植当前代码时，突然发现了解决方案。因此现在，

$（“html”）。在（“单击”）上，…

部分如下所示

    $("html").on("click", function(e) {

        if ( $(e.target).hasClass("dropdown-menu") || $(e.target).parents(".dropdown-menu").length ) {
            // do nothing, basically
        } else {
            $(".dropdown-menu.opened").removeClass("opened");
        }
    });

---

基本上，我只是观察从

$（“html”）

单击是否与下拉列表有关系。如果是，则什么也不做。如果不是，则这意味着我单击了AnyAre，但没有单击下拉列表所在的位置。

它认为这样的操作应该可以完成以下工作：

$(document).ready(function() {
    $("html").on('click', function(e) {
        $(".dropdown-menu.opened").removeClass("opened");
    });
    $(".nav").find("a.has-drop").on('click', function(e) {
        e.preventDefault();
        e.stopPropagation();
        var $thisMenu = $(this).siblings(".dropdown-menu").toggleClass("opened");
        $(this).closest(".nav").find(".dropdown-menu").not($thisMenu).removeClass("opened");
    });
});

未经测试

注:

• removeClass（）

  在几个地方替换了

  toggleClass（）

• 秘诀是先切换

  $thismmenu

  ，然后在下一行中使用

  not（$thismmenu）

  ，以确保

  $thismmenu

  保持在被切换到的任何状态

---

非常感谢@Beetroot Beetroot。最后，关键是巧妙地使用了.not（），以避免指令相互重叠，并且实际上完全相同。不知道。not（）真是太强大了。不好意思，呃。很抱歉打扰你，但我仍然面临这个问题：在下拉列表中单击类似于.divider元素的内容，会导致下拉列表本身隐藏起来。我想e.stopPropagation（）；可以阻止这类问题。我错了吗？L.v.N.-你能给我做一个工作演示吗？这里的大多数人都用。当然！给我几分钟，然后好！看到“编辑2”，这里有我自己最新问题的答案。再次感谢你！

        $("html").on("click", function(e) {
            $(".dropdown-menu.opened").removeClass("opened");
        });

        $(".nav").find("li :first-child").on("click", function(e) {
            e.preventDefault();
            e.stopPropagation();

            var $thisMenu = $(this).siblings(".dropdown-menu").toggleClass("opened");
            $(".dropdown-menu").not($thisMenu).removeClass("opened");
        });

    });

$(".nav").find("a.has-drop").on(...

$(".nav").find("li :first-child").on(...

    $("html").on("click", function(e) {

        if ( $(e.target).hasClass("dropdown-menu") || $(e.target).parents(".dropdown-menu").length ) {
            // do nothing, basically
        } else {
            $(".dropdown-menu.opened").removeClass("opened");
        }
    });

$(document).ready(function() {
    $("html").on('click', function(e) {
        $(".dropdown-menu.opened").removeClass("opened");
    });
    $(".nav").find("a.has-drop").on('click', function(e) {
        e.preventDefault();
        e.stopPropagation();
        var $thisMenu = $(this).siblings(".dropdown-menu").toggleClass("opened");
        $(this).closest(".nav").find(".dropdown-menu").not($thisMenu).removeClass("opened");
    });
});