Question

我正在学习Javascript，我正在尝试创建一个简单的下拉菜单。我可以在顶部菜单的Google主页上看到我所需功能的一个示例，其中包含“更多”和“设置”下拉列表。

我有一个设置为显示的ul：使用onclick（）JS事件处理程序进行内联。当我点击页面上除现在可见的ul以外的任何地方时，如何让ul返回显示：none？

我用谷歌搜索了模糊并将焦点设置为另一个元素，但我不知道如何实际操作。

我想用直接的Javascript来做，而不是jQuery。

这是我使用的html：

<div class="info">  
     Some Text Boom A <a  onclick="menu('id1');">Link</a> | More text 
     <a onclick="menu('id2');">Another Link</a> | more text 
     <ul id="id1" class="submenu">  
       <li><a href="dfhdfh">A1</a></li>  
       <li><a href="aetjetjsd">A2 This is Long</a></li>  
       <li><a href="etetueb">A3</a></li>  
     </ul>  
    <ul id="id2" class="submenu">  
       <li><a href="dfhdfh">B1</a></li>  
       <li><a href="aetjetjsd">B2</a></li>  
       <li><a href="etetueb">B3</a></li>  
     </ul>  
  </div>

当用户点击其中一个关联的<a>标记时，隐藏在<ul>标记正下方的<a>变为可见。当用户点击除<ul>之外的任何地方时，我希望<ul>元素消失。

编辑：

这是我的javascript：

function menu(id) {  
    var myLayer = document.getElementById(id);  
    if (myLayer.style.display == "none" || myLayer.style.display == "") {  
        myLayer.style.display = "block";  
    } else {  
        myLayer.style.display = "none";  
    }  
}

编辑2：

完整的CodE：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>

<style type="text/css">
a
{
    color:blue;
}

.info ul.submenu
{
    border: solid 1px #e0e0e0;
    background-color: #fff;
    position: absolute;
    padding: 0;
    z-index: 2;
    display: none;
}

.info ul.submenu li
{
    display: block;
    border-top: solid 1px #e0e0e0;
    margin: 0px 10px 0 10px;
}

.info ul.submenu li a
{
    display: block;
    padding: 7px 0px 6px 0;
    color: #1177ee;
    cursor:pointer;
}

</style>

<script type="text/javascript">

function menu(id) {   
    var myLayer = document.getElementById(id);   

    myLayer.onblur = function() {     
        myLayer.style.display = 'none'; 
    }; 

    if (myLayer.style.display == "none" || myLayer.style.display == "") {   
        myLayer.style.display = "block";   
    } else {   
        myLayer.style.display = "none";   
    }   
}

</script>
</head>

<body>
<div class="info">   
     Some Text Boom A <a  onclick="menu('id1');">Link</a> | More text  
     <a onclick="menu('id2');">Another Link</a> | more text  
     <ul id="id1" class="submenu">   
       <li><a href="dfhdfh">A1</a></li>   
       <li><a href="aetjetjsd">A2 This is Long</a></li>   
       <li><a href="etetueb">A3</a></li>   
     </ul>   
    <ul id="id2" class="submenu">   
       <li><a href="dfhdfh">B1</a></li>   
       <li><a href="aetjetjsd">B2</a></li>   
       <li><a href="etetueb">B3</a></li>   
     </ul>   
  </div>  
</body>
</html>

Answer 1

实际上这很简单。

一旦你引用了要绑定blur事件监听器的DOM元素，就像这样分配它：

myLayer.onblur = function() {
    myLayer.style.display = 'none';
};

Answer 2

jQuery创建一个可以绑定函数的blur事件，是否有充分的理由不使用jQuery？使用JavaScript库即使它只是用于事件处理，也有助于使您免受浏览器差异的影响。我只在表单中使用了焦点/模糊事件来处理文本输入或textarea元素。听起来你想要一个列表浮动在其他元素之上。我会相对定位列表并给它一个高于背景的z-index。我将点击事件绑定到列表外的区域，以关闭列表弹出窗口。切换弹出/模态窗口你想要的是什么？我会看一下jQuery SimpleModal的模态窗口示例，或者看一下如果你想自己动画一个实现的方法。

Answer 3

如果您正在寻找一种方法来停止“onclick”事件，如果它发生在您的菜单中，那么“event.stopPropagation（）;”可能是你需要的

<body onclick="menu('id1'); menu('id2');">
  <div class="info">  
     Some Text Boom A <a  onclick="menu('id1');">Link</a> | More text 
     <a onclick="menu('id2');">Another Link</a> | more text 

     <ul id="id1" class="submenu" onclick="alert('click menu'); event.stopPropagation();">  
       <li><a href="dfhdfh">A1</a></li>  
       <li><a href="aetjetjsd">A2 This is Long</a></li>  
       <li><a href="etetueb">A3</a></li>  
     </ul>  
    <ul id="id2" class="submenu" onclick="alert('click menu'); event.stopPropagation();">  
       <li><a href="dfhdfh">B1</a></li>  
       <li><a href="aetjetjsd">B2</a></li>  
       <li><a href="etetueb">B3</a></li>  
     </ul>  
  </div> 
</body>

Javascript模糊

3 个答案: