我正在创建 JavaScript 下拉菜单，但它没有按预期工作

i am creating javascript drop down menu but its not working as expected?

本文关键字：工作 创建 JavaScript 下拉菜单      更新时间：2023-09-26

这是我的html，请检查jsfiddle这未按预期工作 

<div id="menu1" class="menu">
<a href="#" id="home">Home</a>
<ul id="homesection">
<li>Item one</li>
<li>Item Two</li>
<li>Item Three</li>
</ul>
</div>
<div id="menu2" class="menu">
<a href="#" id="gallery">Gallery</a>
<ul id="gallerysection">
<li>Item one</li>
<li>Item Two</li>
<li>Item Three</li>
</ul>
</div>
<div id="menu3" class="menu">
<a href="#" id="about">About</a>
<ul id="aboutsection">
<li>Item one</li>
<li>Item Two</li>
<li>Item Three</li>
</ul>
</div>
<div id="clear"> </div>

这是我的 CSS 溺爱 

.menu{
float:left;

}
ul{
position:absolute;
width:150px;
z-index:500;
display:none;
}
ul,li{
margin:0;
padding:0;
}
li{
list-style-type:none;
padding:3px;
color:gray;
background-color:"lightblue";
}
a{
text-decoration:none;
font-size:2em;
color:gray;
font-family:verdana;
display:block;
margin-right:15px;
}
#clear{
clear:both;
}

这是我的JavaScript 

var links = document.getElementsByTagName("a");
var len = links.length;
for(var i = 0; i<len; i++){
links[i].onmouseover = handleHover;
}
function handleHover(){
var uls = document.getElementsByTagName("ul");
var len = uls.length;
for(var i=0; i<len;i++){
uls[i].style.display = "none";
}
var e = window.event;
var target = e.srcElement.id;
target += "section";
var mainmenu = document.getElementById(target);
mainmenu.style.display = "block";
mainmenu.onmouseout = function(){
mainmenu.style.display = "none";
}

}

它的下拉菜单，但是当光标经过第一个菜单项时，菜单消失了？

你忘了关闭handleHover（），请参阅下面的工作小提琴

http://jsfiddle.net/3tFKb/4/

编辑如果将鼠标悬停和鼠标退出更改为 mouseenter 和 mouseleave，则它按预期工作。

工作代码：

var links = document.getElementsByTagName("a");
var len = links.length;
for(var i = 0; i<len; i++){
    links[i].onmouseenter = handleHover;    
}
function handleHover(){
    var uls = document.getElementsByTagName("ul");
    var len = uls.length;
    for(var i=0; i<len;i++){
        uls[i].style.display = "none";
    }
    var e = window.event;
    var target = e.srcElement.id;
    target += "section";
    var mainmenu = document.getElementById(target);
    mainmenu.style.display = "block";
    mainmenu.onmouseleave = function(event){
        mainmenu.style.display = "none";
    }
}
相关文章：