菜單項懸停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/