菜单项悬停JavaScript

Question

如果有人能帮助我指出正确的方向，那将是非常棒的，因为我一直在寻找这个问题的解决方案几个小时。

http://jamessuske.com/will/

我有上有3个菜单项的菜单。如果将鼠标悬停在最后两个菜单项上，则会出现一个包含不同列表项目的div。这部分工作正常，但如果我从另一个列表中滚动其他菜单项，它们会再次消失。

这是我的JavaScript：

<script type="text/javascript"> 

function showGalleryNav(){ 

document.getElementById('headerNavGallery').style.display = ""; 

} 

function showInfoNav(){ 

document.getElementById('headerNavInfo').style.display = ""; 

} 


function hideGalleryNav(){ 

document.getElementById('headerNavGallery').style.display = "none"; 

} 

function hideInfoNav(){ 

document.getElementById('headerNavInfo').style.display = "none"; 

} 

</script> 

和HTML

<div class="headerNav"> 
<ul> 
<li><a href="#">Home</a></li> 
<li><a href="#" onmouseover="javascript:showGalleryNav()" onmouseout="javascript:hideGalleryNav()">Gallery</a></li> 
<li><a href="#" onmouseover="javascript:showInfoNav()" onmouseout="javascript:hideInfoNav()">Info</a></li> 
</ul> 
</div><!--headerNav--> 

<div class="headerNavGallery" id="headerNavGallery" style="display:none;"> 
<ul> 
<li><a href="#">Categoies</a></li> 
<li><a href="#">Products</a></li> 
</ul> 
</div><!--headerNavGallery--> 

<div class="headerNavInfo" id="headerNavInfo" style="display:none;"> 
<ul> 
<li><a href="#">William Ruppel</a></li> 
<li><a href="#">CV</a></li> 
<li><a href="#">Artist Bio</a></li> 
<li><a href="#">Video</a></li> 
<li><a href="#">Contact</a></li> 
</ul> 
</div><!--headerNavInfo--> 

我试过不同的属性，但他们都不工作，我也曾尝试切换到的jQuery与

$('#headerNavGallery").css("display", ""); 

也没有工作，

任何想法都会大大增加。

Answer 1

检查类型0，NVM ... 设置显示属性应该始终有一个值“无”或“块”，空（“”）是一个坏复位...试试这个：

<script> 
    $(".galleryNavToggle").on("mouseenter mouseleave", function(event){ 
    var headNavGal = $("#headerNavGallery"); 
    if(event.type === "mouseenter"){ 
     headNavGal.show(); 
    }else if(event.type ==="mouseleave" && 
      ((event.relatedTarget !== headNavGal[0] && $.inArray(event.relatedTarget, headNavGal.find("*")) <=0) || 
      $.inArray(event.relatedTarget, $(".galleryNavInfoToggle")) > 0)){ 
     headNavGal.hide(); 
    } 
}); 
$("#headerNavGallery").on("mouseleave", function(event){ 
    var headNavGal = $(this); 
    if(event.type ==="mouseleave"){ 
     headNavGal.hide(); 
    } 
}); 

</script> 

HTML

<div class="headerNav"> 
<ul> 
<li><a href="#">Home</a></li> 
<li><a href="" class='galleryNavToggle'>Gallery</a></li> 
<li><a href="" class='galleryNavInfoToggle'>Info</a></li> 
</ul> 
</div><!--headerNav--> 

<div class="headerNavGallery" id="headerNavGallery" style="display:none;"> 
<ul> 
<li><a href="#">Categoies</a></li> 
<li><a href="#">Products</a></li> 
</ul> 
</div><!--headerNavGallery--> 

和CSS

.headerNav{ 
    border:thin solid black; 
    float:left; 
} 
.headerNavGallery{ 
float:left; 
border:thin solid black; 
    margin-left:-1px; 
} 

Answer 2

1）<a href="#" onmouseover="javascript:showGalleryNav()" onmouseout="javascript:hideGalleryNav()">Gallery</a>

您无需指定javascript:。这是多余的。

2）它的工作方式与您编程的方式完全相同。当你退出时，它会消失。

3）您的代码为“headerNavInfo”，但没有匹配的HTML。

Answer 3

其实你试图完成的是所有的css只可行，但不是与该标记结构。首先你需要嵌套你的列表。

<ul class="menu"> 
<li><a href="#">item 1</a></li> 
<li> 
    <a href="#">item 2 with sub</a> 
    <ul> 
    <li><a href="#">sub menu item 1</a></li> 
    <li><a href="#">sub menu item 2</a></li> 
    ... so on .. 
    </ul> 
</li> 
</ul> 

一些CSS

.menu li { 
    position: relative; 
} 
.menu li ul { 
    position: absolute; 
    top: 30px; /* the height of the root level item */ 
    display: none; 
} 
.menu li li { 
    position: static; /* or you could float these for horizontal menu */ 

} 
.menu li:hover ul { 
    display: block; 
} 

这些都是非常基本。但我强烈建议你去学习superfish菜单，因为它是jquery drop drop菜单，但它会随着js关闭而降级，所以你可以研究它的CSS。 http://users.tpg.com.au/j_birch/plugins/superfish/