当点击它时隐藏一个div

Question

我添加了代码来创建一个div，#pending-friend-list-dropdown，点击它之外时关闭。这工作正常，但现在当点击我的图像股利，friend-icon，下拉div现在不会关闭。

正如你可以在我的代码片段中看到的，图像div是打开下拉框的内容。我只是想弄清楚如何使用图像div来打开和关闭下拉菜单，同时使用mouseup函数关闭下拉div。

//Hiding Pending Friend Drop-down when clicking out of it 
 
$(document).mouseup(function (e) 
 
{ 
 
    var container = $("#pending-friend-list-dropdown"); 
 
\t var friend_icon = $("#friend-icon"); 
 

 
    if (!container.is(e.target) // if the target of the click isn't the container... 
 
     && container.has(e.target).length === 0) // ... nor a descendant of the container 
 
    { 
 
     container.hide(); 
 
    } 
 
\t else if (friend_icon.has(e.target)) { 
 
\t \t container.hide(); 
 
\t } 
 
}); 
 

 
//Toggle Pending Friend List 
 
$("#friend-icon").click(function() { 
 
\t $('#pending-friend-list-dropdown').toggle(100); 
 
});

#main-bar { 
 
\t width: 85%; 
 
\t height: 60px; 
 
\t position: relative; 
 
\t margin-left: 15%; 
 
\t background: red; 
 
\t padding: 3px 0; 
 
} 
 
#main-bar-container { 
 
\t border: 1px solid black; 
 
\t margin: 0 10px; 
 
\t position: relative; 
 
\t width: 95%; 
 
\t height: 56px; 
 
\t left: 2%; 
 
} 
 
/*---- Pending Friends List----*/ 
 
#friend-icon { 
 
\t display: inline-block; 
 
\t cursor: pointer; 
 
\t position: absolute; 
 
\t right: 20%; 
 
\t top: 15px; 
 
} 
 
#friend-icon img { 
 
\t height: 30px; 
 
\t width: 30px; 
 
} 
 
#pending-friend-list-dropdown { 
 
\t height: 500px; 
 
\t width: 400px; 
 
\t overflow: scroll; 
 
\t z-index: 100000; 
 
\t position: absolute; 
 
\t left: 70%; 
 
\t top: 70px; 
 
\t background: blue; 
 
\t display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="main-bar"> 
 
\t \t <div id="main-bar-container"> 
 
\t \t \t <div id="friend-icon"><img src="../icons/collection/social.png" alt="Pending Friends"></div> 
 
\t \t </div> 
 
\t </div> 
 
<div id="pending-friend-list-dropdown"> 
 
    </div>

Answer 1

您可以在只要有人点击html元素（整个页面），就可以通过运行代码来更简单地实现这一点。 然后检查点击是否位于某些元素上。

当点击“＃朋友图标”时，也不需要在两个地方给出说明。我在下面的代码中删除了第二个实例，并将.toggle移至if语句。

现在就像一个魅力：

$("html").click(function(event) 
{ 

var container = "#pending-friend-list-dropdown"; 
var friend_icon = '#friend-icon, #friend-icon img'; 

    if ($(event.target).is(friend_icon)) // clicking on the toggler-div or the img it contains 
    {  
     $(container).toggle(100); 
    } 
    else if (!$(event.target).is(friend_icon) // clicking outside of the toggler 
    && !$(event.target).is(container)) // and outside of the toggled div itself 
    { 
     $(container).hide(); 
    } 
}); 

这里有一个的jsfiddle：https://jsfiddle.net/r54ardcz/2/

Answer 2

好，你可以做一件事..隐藏的div当它失去焦点

实现与tabIndex属性此 化妆格可聚焦，然后再连接onblur事件处理程序

代码http://jsbin.com/viginezape/edit?html,css,js,console,output

Answer 3

我会给只是让我认识的那些在这个网站第三种选择。这是Office Fabric UI使用的选项（https://dev.office.com/fabric#/components/contextualmenu），我认为@ zheer-mchammer-husain的答案更多地沿着Twitter Bootstrap模型。

基本上你创建了你的整个页面层（高度：100vh和宽度：100vw;位置：固定的），然后把该层内的下拉列表中的内容。当用户点击该图层时，它会立即关闭整个图层并完成所有操作。