当点击页面上的任何地方，下拉式隐藏

我搜索了很多关于我的问题，但没有找到任何解决方案。我知道，我是JavaScript/JQuery中的新成员，但也许有人可以帮助我:)我做了这个漂亮的下拉菜单，工作的是什么，我需要什么，但是有最后一个bug。当我点击页面上的任何地方时，它不会隐藏。有我的JSFiddle当点击页面上的任何地方，下拉式隐藏

那里的任何解决方案？

有我的JavaScript/JQuery的

var $dropdown = $('.dropdown-content'); 

$(".dropdown-label").click(function(e){ 
    var $drop = $(this).toggleClass('dropdown--active').find(".dropdown-content").stop(true).toggle(100); 
    $dropdown.not($drop).stop(true).hide(100); 
    return false; 
});

来源

2016-11-09 Daniels Jirgensons

在下面的代码我只添加的文件点击绑定。

var $dropdown = $('.dropdown-content'); 

$(".dropdown-label").click(function(e){ 
    var $drop = $(this).toggleClass('dropdown--active').find(".dropdown-content").stop(true).toggle(100); 
    $dropdown.not($drop).stop(true).hide(100); 
    return false; 
}); 

$(document).on("click", function() { 
    $(".dropdown-content").hide() 
})

来源

2016-11-09 08:26:14

尼斯一个队友！ –

@prasad有更彻底的答案，因为他包括停止从冒泡点击。我试图专门回答OP的问题。 –

谢谢，这对我很有帮助！ :) –

updated fiddle点击与文件。它会隐藏.dropdown-content。而申请e.preventDefault()他们从其他防止点击

$(document).click(function(e){ 
$(".dropdown-content").hide(); 
e.preventDefault(); 
})

来源

2016-11-09 08:29:10 prasanth

下面是HTML

<div class="dropdown-content" style="width: 200px;height: 200px;border:1px solid #ccc;"></div>

在脚本文件

$(document).on("click","body",function(e) { 
     if(!$(e.target).hasClass("dropdown-content")) { 
      $(".dropdown-content").hide(); 
     } 
    });

这里是小提琴https://jsfiddle.net/ej4t2c5u/

来源

2016-11-09 08:31:16

.dropdown内容将其更改为ID和我的东西是好的和简单的解决方案

window.addEventListener('mouseup',function(){ 
 

 

 
var popup =document.getElementById('dropdown-content'); 
 

 

 

 
if (event.target != popup && event.target.parentNode != popup) 
 

 
{ 
 

 
popup.style.display='none'; 
 

 

 
} 
 

 

 

 

 

 

 
});

来源

2016-11-09 08:32:01

有多个dropdown-content实例，在这种情况下应该使用一个类（不是一个id） –

当点击页面上的任何地方，下拉式隐藏

回答

相关问题