Javascriptのif文を使用してOnMouseOutでdivの消滅を防ぐ

Question

私が取り組んでいるこのナビゲーションバーでは、ボタンの上にマウスを置くとdivが表示され、マウスを外すと消えます。問題は、マウスからボタンを外して表示されるdivに移動すると、リンクが含まれているためdivが消えないようにすることです。私はそれが表示されたdivの外に（出現divにではなく）ボタンからマウスを離したときに消えるだけです。

私はこれにOnMouseOverとOnMouseOut関数を使用しています。

if文は、私が探していることを実行できるようにするelse文の中で使用します（前述のように）？

のjavascript：

function showlayer(layer){ 
var myLayer = document.getElementById(layer); 
if(myLayer.style.display=="none" || myLayer.style.display==""){ 
myLayer.style.display="block"; 
} else { 
myLayer.style.display="none"; 
} 
} 

HTML：私は、人々は通常、この種のものを達成すると思います

<div id="topBar"> 
    <div id="navContainer"> 
    (...) 
    <a href="#" class="nav" onmouseover="javascript:showlayer('commLinks')" onmouseout="javascript:showlayer('commLinks')"><div class="communityBtn">Community</div></a> 

<div id="subnavLayer"> 
<div class="commHidden" id="commLinks"> 
    <div class="commLinksText">Booster Club</div> 
    <div class="commLinksText">PTO</div> 
    <div class="commLinksText">Fine Arts</div> 
    <div class="commLinksText">City of West Branch</div> 
</div> 

Answer 1

ポップアップナビゲーションを見出しの子ノードにします。このように、ユーザーがポップアップのオプションをマウス操作すると、マウスは技術的には見出しの内側にあり、mouseoutイベントはトリガーされません。

<div id="topBar"> 
    <div id="navContainer"> 
    <div class="nav" onmouseover="javascript:showlayer('commLinks')" onmouseout="javascript:showlayer('commLinks')"> 
     <div class="communityBtn">Community</div> 
     <div id="subnavLayer" style="position:absolute"> 
      <div class="commHidden" id="commLinks"> 
       <div class="commLinksText">Booster Club</div> 
       <div class="commLinksText">PTO</div> 
       <div class="commLinksText">Fine Arts</div> 
       <div class="commLinksText">City of West Branch</div> 
      </div> 
     </div> 
    </div> 
</div> 

このようにHTMLを構成するうえで最も重要な点は、実際にはCSSとスクリプトなしでポップアップを表示できることです。基本的には、次のようなスタイルがあります：

#subnavLayer { 
    display:none; 
} 
.nav:hover #subnavLayer { 
    display:block; 
}