时间戳

首页 > 解决方案 > 如何补充脚本，使菜单通过点击外部隐藏？

javascript - 如何补充脚本，使菜单通过点击外部隐藏？

问题描述

现在通过单击链接打开和隐藏菜单。 

function getposOffset(overlay, offsettype){
var totaloffset=(offsettype=="left")? overlay.offsetLeft : overlay.offsetTop;
var parentEl=overlay.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}

function overlay(curobj, subobjstr, opt_position) {
if (document.getElementById){
var subobj=document.getElementById(subobjstr)
subobj.style.display=(subobj.style.display!="block")? "block" : "none"

var xpos=getposOffset(curobj, "left")+((typeof opt_position!="undefined" && opt_position.indexOf("right")!=-1)? -(subobj.offsetWidth-curobj.offsetWidth) : 0) 
var ypos=getposOffset(curobj, "top")+((typeof opt_position!="undefined" && opt_position.indexOf("bottom")!=-1)? curobj.offsetHeight : 0)
subobj.style.left=xpos+"px"
subobj.style.top=ypos+"px"
return false
}
else
return true
}
a {font: normal 12px arial; margin: 0 20px 0 0;}
a:hover {text-decoration: none;}
.menu {position: absolute; display: none; background: cornsilk; padding: 4px; margin: 2px 0; border: 1px solid silver; font: normal 11px arial;}
<a href="#" onClick="return overlay(this, 'menu1', 'leftbottom')">link1</a>
<a href="#" onClick="return overlay(this, 'menu2', 'leftbottom')">link2</a>
<a href="#" onClick="return overlay(this, 'menu3', 'rightbottom')">link3</a>

<div id="menu1" class="menu">menu1</div>
<div id="menu2" class="menu">menu2</div>
<div id="menu3" class="menu">menu3</div>

jsfiddle 示例

如何通过单击外部来隐藏菜单？ 谢谢你。

标签： javascript

解决方案

所需的更改是这些 - ：

  • 每当用户在外面点击时，我们都需要添加代码来隐藏菜单......
document.addEventListener("click", () => {
    if(document.getElementById("menu1").style.display === "block"){
      document.getElementById("menu1").style.display = "none";
    }
    if(document.getElementById("menu2").style.display === "block"){
        document.getElementById("menu2").style.display = "none";
    }
    if(document.getElementById("menu3").style.display === "block"){
        document.getElementById("menu3").style.display = "none";
    }
})
  • 添加代码以在单击链接时阻止事件冒泡，因为我们需要在链接单击时显示菜单，为此我们只需将事件传递给overlay函数并添加event.stopPropagation()...
function overlay(e, curobj, subobjstr, opt_position) {
    e.stopPropagation();
    if (document.getElementById){
        var subobj=document.getElementById(subobjstr)
        subobj.style.display=(subobj.style.display!="block")? "block" : "none"

...其余功能将相同...

  • 将事件从 HTML 传递到overlay函数...
<a href="#" onClick="overlay(event, this, 'menu1', 'leftbottom')">link1</a>
<a href="#" onClick="return overlay(event, this, 'menu2', 'leftbottom')">link2</a>
<a href="#" onClick="return overlay(event, this, 'menu3', 'rightbottom')">link3</a>

这是工作演示-： https ://jsfiddle.net/bhza0tLx/12/

希望能帮助到你....

推荐阅读