Question

我想用javascript创建一个多级菜单。问题是当我用mousover事件显示第一个div时，我希望保持显示第一个div并导航它以显示第二个div。

我可以将mouseother活动放在imbriqued div上吗？这是我想做的事情：

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

谢

Answer 1

这是使用嵌套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>

当鼠标移过它们时，您可以简单地显示和隐藏不同的菜单级别，而更高级别的菜单保持可见。

onmouseover里面两个div

1 个答案: