关闭菜单/格关闭
我一直在尝试使菜单关闭,当我点击页面上的任何地方,除了菜单内。关闭菜单/格关闭
我设法做到这一点,当菜单内的链接被点击时,通过给它提供与菜单按钮相同的onclick函数,但我没有成功点击菜单关闭它。
http://codepen.io/anon/pen/LEvdmW
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
<button name="type" id="button" onclick="setVisibility('layer')">Open</button>
<div id="layer"><a onclick="setVisibility('layer')"> Hello</div>
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;
}
它可以通过下面的代码来实现。
$(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();
}
});
@GoldenGonaz:标记为答案,如果它适合你。 – 2015-04-02 12:29:10
会这样做,只是试图将其实现到我现有的代码中,目前有一点麻烦让它工作。你的小提琴很好地工作,虽然 – GoldenGonaz 2015-04-02 12:35:54
我只是无法得到这个与我的代码@Jitendra一起工作我可能误解了一些很简单的东西 – GoldenGonaz 2015-04-02 21:31:08
你可以有,你有你的onclick事件隐藏的div股利身后的背景。检查下面(修改你的代码为你懂的)修改后的代码:
工作例如:DEMO HERE
HTML
<button name="type" id="button" onclick="setVisibility('layer')">Open</button>
<div id="backdrop" onclick="setVisibility('layer')"></div>
<div id="layer">Hello</div>
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
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';
}
}
谢谢,我与这个问题是背后的层吸收点击。所以如果我点击链接进入链接,我必须点击两次。一旦关闭菜单并第二次单击页面上的链接。 – GoldenGonaz 2015-04-02 12:45:47
我不这么认为..你试过..?出于同样的原因,我使用Z-index ...背景将保留在div后面 – Nielarshi 2015-04-02 12:55:10
无论你是说如果页面上有任何链接,即使在div之外,你也应该可以点击它并且在同一个tym中div也应该隐藏..? – Nielarshi 2015-04-02 13:00:25
是 你只能使用javascript解决方案,或者你可以使用jQuery? – Sachin 2015-04-02 12:14:36
jquery也对不起,我忘了补充一点。 – GoldenGonaz 2015-04-02 12:15:43