[英]Click off menu/div to close
I've been trying to make my menu close when I click anywhere on the page except for within the menu. 当我单击页面上除菜单内的任何位置时,我一直试图关闭菜单。
I managed to achieve this for when a link is clicked within the menu by giving it the same onclick function as the menu button, but I am not succeeding at clicking off the menu to close it. 通过为菜单中的链接提供与菜单按钮相同的onclick功能,我设法实现了这一点,但是我没有成功单击菜单将其关闭。
http://codepen.io/anon/pen/LEvdmW http://codepen.io/anon/pen/LEvdmW
JS JS
function setVisibility(id) {
var targetButton;
switch( id ) {
case "layer":
targetButton = "button";
break;
}
if (document.getElementById(targetButton).value == 'Close') {
document.getElementById(targetButton).innerHTML = 'Open';
document.getElementById(targetButton).value = 'Open';
document.getElementById(id).style.display = 'none';
} else {
document.getElementById(targetButton).innerHTML = 'Close';
document.getElementById(targetButton).value = 'Close';
document.getElementById(id).style.display = 'inline';
}
}
HTML 的HTML
<button name="type" id="button" onclick="setVisibility('layer')">Open</button>
<div id="layer"><a onclick="setVisibility('layer')"> Hello</div>
CSS 的CSS
#layer {
position: absolute;
left: 8px;
top: 50px;
background-color: #989898;
width: 280px;
height: 100px;
padding: 10px;
color: black;
display: none;
}
button { border:none; background:#989898; color:#fff; padding:10px; outline:none; cursor:pointer;
}
It can be achieved via below code. 可以通过下面的代码来实现。
$(document).mouseup(function (e)
{
var container = $("YOUR CONTAINER SELECTOR");
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();
}
});
Working Fiddle: http://jsfiddle.net/LCB5W/153/ 工作小提琴: http : //jsfiddle.net/LCB5W/153/
Updated Fiddle: http://jsfiddle.net/LCB5W/154/ 更新的小提琴: http : //jsfiddle.net/LCB5W/154/
You can have a backdrop behind the div where you have your onclick event to hide the div. 您可以在div后面有一个背景,在其中您可以使用onclick事件来隐藏div。 Check the modified code below (modified your code for you to understand): 检查以下修改后的代码(修改后的代码供您了解):
Working example : DEMO HERE 工作示例: 此处演示
HTML 的HTML
<button name="type" id="button" onclick="setVisibility('layer')">Open</button>
<div id="backdrop" onclick="setVisibility('layer')"></div>
<div id="layer">Hello</div>
CSS 的CSS
#layer {
position: absolute;
left: 8px;
top: 50px;
background-color: white;
width: 280px;
height: 100px;
padding: 10px;
color: black;
display: none;
z-index : 999;
}
#backdrop {
position : absolute;
top : 0;
left : 0;
width : 100%;
height : 100%;
background : black;
opacity : 0.5;
z-index : 2;
display : none;
}
button {
border:none;
background:#989898;
color:#fff;
padding:10px;
outline:none;
cursor:pointer;
}
JS JS
function setVisibility(id) {
var targetButton;
switch( id ) {
case "layer":
targetButton = "button";
break;
}
if (document.getElementById(targetButton).value == 'Close') {
document.getElementById(targetButton).innerHTML = 'Open';
document.getElementById(targetButton).value = 'Open';
document.getElementById(id).style.display = 'none';
document.getElementById("backdrop").style.display = "none";
} else {
document.getElementById("backdrop").style.display = "block";
document.getElementById(targetButton).innerHTML = 'Close';
document.getElementById(targetButton).value = 'Close';
document.getElementById(id).style.display = 'inline';
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.