メニュー項目ホバーJavaScript

Question

私がこの問題の解決策を何時間も探しているので、誰かが正しい方向を指すのを助けることができたら、それはすばらしいでしょう。

http://jamessuske.com/will/

私はそれに3つのメニュー項目を含むメニューがあります。最後の2つのメニュー項目の上にマウスを置くと、別のリストの項目を含む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> 

そして、私は別の属性を試してみたが、それらのどれも機能していない、私も

でのjQueryへの切り替えをしようとしている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--> 

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

も機能しませんでした。

どんなアイデアでも大いに賛成するでしょう。常に空の値は「none」または「ブロック」、（「」）が必要です表示プロパティを設定typeo

Answer 1

チェック、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; 
} 

これらはかなり基本です。しかし、私は強くあなたがjqueryのドロップドロップメニューのようにスーパーフィッシュのメニューを勉強することをお勧めしますが、それはjsオフとうまく劣化するので、ちょうどそれのCSSを勉強することができます。 http://users.tpg.com.au/j_birch/plugins/superfish/