下拉菜单点击外部[关闭]答案

【问题标题】：Dropdown menu click-outside [closed]下拉菜单点击外部[关闭]
【发布时间】：2019-06-24 19:41:52
【问题描述】：

我在他下方有一个按钮（汉堡菜单）和一个下拉菜单。当我点击我的汉堡按钮时，我想要我的下拉菜单出现。当我在我的下拉菜单之外单击时，我希望它们消失......从那以后的逻辑。

但是我触发出现的按钮也在下拉菜单之外......所以如果我在下拉clickoutside上放置一个事件，我的按钮将永远不会被触发（点击事件+ clickoutside下拉=>没有任何反应）

那我该怎么做呢？

【问题讨论】：

【解决方案1】：

我对这个问题有点困惑，但我会继续回答我对这个问题的理解。因此，您有一个汉堡包图标，其下方是一个菜单下拉菜单，单击汉堡包图标时，您要打开菜单下拉菜单，然后单击除此之外的其他菜单应该关闭下拉菜单-面临的问题：汉堡包也在菜单下拉菜单之外

您可以检查 event.target 是否违反了您的下拉菜单和汉堡包都包含的特定类的存在，因此，如果 event.target 不包含存在的类，则每当单击文档时在元素上，然后通过应用可折叠类关闭下拉列表。

注意：

".menu-element" 是应用于您的汉堡包元素以及菜单下拉元素的类。

$(document).click(function(e) {
    	if (!$(e.target).is('.menu-element')) {
        	$('.collapse').collapse('hide');	    
        }
    });

【讨论】：

【解决方案2】：

给按钮一个你还没有使用过的类名，然后在点击事件上检查 $event 目标和它的类列表。如果它具有您选择的类名，请忽略 click outside 事件。

如果你提供一些代码示例，我可以一步一步告诉你如何做。

【讨论】：