2012-02-13 21 views
0

私はjavascriptでマルチレベルメニューを作りたいと思います。 問題は、mousoverイベントで最初のdivを表示し、最初のdivを表示したままにしてtrhowをナビゲートして2番目のdivを表示したい場合です。onmouseover inside two div

imbriqued divにmouseotherイベントを入れることはできますか?ここ は私が何をしたいものです。

function show_menu(nom_menu){ 

document.getElementById('ss_menu_marque').style.display='none'; 

document.getElementById(nom_menu).style.display='block'; 
} 

function hide_menu(nom_menu){ 
document.getElementById(nom_menu).style.display='none'; 
} 

    function hide_menus_tous(){ 
    document.getElementById('ss_menu_marque').style.display='none'; 
    } 
<a href="marque.php" onmouseover="show_menu('ss_menu_marque');"> 

<div id="ss_menu_marque" onmouseover="show_menu('ss_menu_marque');" 
onmouseout="hide_menu('ss_menu_marque');"> 


<div id="ss_menu_marque2" onmouseover="show_menu('ss_menu_marque3');" 
onmouseout="hide_menu('ss_menu_marque');">   

</div> 
</div 

フランク

答えて

0

これは、ネストされたdivタグでそれを行うことができる方法である。

<html> 
<head> 
<script type="text/javascript"> 
function show_menu(nom_menu) { 
    document.getElementById(nom_menu).style.display='block'; 
} 

function hide_menu(nom_menu){ 
    document.getElementById(nom_menu).style.display='none'; 
} 
</script> 
</head> 
<body> 
<div id="ss_menu_marque_root" onmouseover="show_menu('ss_menu_marque_1');" onmouseout="hide_menu('ss_menu_marque_1');"> 
    <a href="marque.php">Menu marque 1</a> 
    <div id="ss_menu_marque_1" style="display: none"> 
     <div onmouseover="show_menu('ss_menu_marque_11');" onmouseout="hide_menu('ss_menu_marque_11');"> 
      Menu marque 11 
      <div id="ss_menu_marque_11" style="display: none"> 
       <div onmouseover="show_menu('ss_menu_marque_111');" onmouseout="hide_menu('ss_menu_marque_111');"> 
        Menu marque 111 
       </div> 
      </div> 
     </div> 
     <div onmouseover="show_menu('ss_menu_marque_12');" onmouseout="hide_menu('ss_menu_marque_12');"> 
      Menu marque 12 
      <div id="ss_menu_marque_12" style="display: none"> 
       <div onmouseover="show_menu('ss_menu_marque_121');" onmouseout="hide_menu('ss_menu_marque_121');"> 
        Menu marque 121 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 
</body> 
</html> 

あなたは単にあなたのように異なるメニューレベルを表示し、非表示にすることができますマウスがそれらの上を移動し、より高いレベルのメニューが表示されたままになります。