Question

我添加了代码来制作div #pending-friend-list-dropdown，在点击它之外关闭。这样可以正常工作，但现在点击我的图像div friend-icon时，下拉div现在不会关闭。

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

＆＃13;

//Hiding Pending Friend Drop-down when clicking out of it
$(document).mouseup(function (e)
{
    var container = $("#pending-friend-list-dropdown");
	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();
    }
	else if (friend_icon.has(e.target)) {
		container.hide();
	}
});

//Toggle Pending Friend List
$("#friend-icon").click(function() {
	$('#pending-friend-list-dropdown').toggle(100);
});

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

点击“＃friend-icon”时，也无需在两个地方提供说明。我在下面的代码中删除了第二个实例，只是将.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属性使div可聚焦，然后附加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;位置：固定），然后将您的下拉内容放在该图层中。当用户点击该图层时，它会立即关闭整个图层，并且一切都已完成。

点击它时隐藏div

3 个答案: