Question

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

也许onblur()不是正确的调用函数。我不知道。我有这段代码：

<!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>

onblur事件根本不起作用。我不明白为什么。

（是的，我知道我不应该使用闭包）

Answer 1

由于UL从未获得焦点，因此无法解雇。只是展示它并没有让它成为焦点。

解决问题的两种方法：

将tabindex添加到UL，并在myLayer.focus();函数中显示后调用menu(..)。这不是很好，因为从技术上来说，你不想{1}你的下拉，而focus周围会出现焦点矩形的副作用。
在文档上注册一个隐藏任何可见菜单的onclick处理程序。

Answer 2

如下所述：

http://www.devguru.com/technologies/ecmascript/quickref/evhan_onblur.html

onblur事件仅触发以下元素：

按钮，复选框，FileUpload，图层，密码，收音机，重置，选择，提交，文本，TextArea，Window。

看起来你正试图在UL元素上使用该事件。相反，我建议在onclick上使用document事件来隐藏弹出窗口。

Onblur事件绑定

2 个答案: