Question

我对javascript很新，所以请耐心等待。

我正在创建一个下拉导航菜单，使用html，css和javascript（没有JQuery）的组合。导航栏中的两个链接有子菜单，下拉到onMouseover，我使用setTimeout和clearTimeout保持子菜单打开，直到我移开鼠标。

这是我遇到的问题。如果我将鼠标悬停在导航栏中的链接上，我会看到它的子菜单，只要我将鼠标放在那里就会显示。如果我立即将鼠标移动到导航栏中的下一个链接，我会获得该链接的子菜单，但仅在最短暂的瞬间消失之前。我的计时器设置中有一些东西对此有所贡献，但我无法找到它。有人可以帮我弄清楚我需要改变哪种设置？

我意识到我可能在这里过于罗嗦了，我道歉。如果您需要我澄清任何事情，请告诉我。

这是我的javascript代码。

function drop(menu) {
    if (menuId)
        menuId.style.display = 'none';

    menuId = document.getElementById(menu);
    menuId.style.display = 'block';
    menuId.style.position = 'relative';
    menuId.style.top = '100%';
    menuId.style.left = '0';

}

function beginTimer() {
    timer = window.setTimeout(hide, 500);
}

function timerToZero() {
    if (timer) {
        window.clearTimeout(timer);
        timer = 0;
    }
}

function hide() {
    if (menuId)
        menuId.style.display = 'none';
}

我的HTML代码在这里。我缩写了列表项以显示相关的部分。

<ul class="nav">
    <li><a href="DepartmentMembers.html" onMouseover="drop('departmentMenu')" onMouseout="beginTimer()">Department Members</a>
        <ul id="departmentMenu" onMouseover = "timerToZero()" onMouseout = "beginTimer()" style="display:none;position:absolute">
            <li><a href="BrianKendricks.html">Brian Kendricks</a></li>
            <li><a href="TimJones.html">Tim Jones</a></li>
            <li><a href="DavidKline.html">David Kline</a></li>
        </ul>
    </li>

    <li><a href="SystemsUsed.html" onMouseover="drop('systemMenu')" onMouseout="beginTimer()">Systems Used</a>
        <ul id="systemMenu" onMouseover = "timerToZero()" onMouseout = "beginTimer()" style="display:none;position:absolute">
            <li><a href="OrgChart.html">Organizational Chart of Library Systems</a></li>
            <li><a href="3M.html">3M Cloud (e-books)</a></li>
            <li><a href="Bibliotheca.html">Bibliotheca (DVD Checkout)</a></li>
        </ul>
    </li>
</ul>

我的code的其余部分可以在JSFiddle上找到

Answer 1

我找到了解决问题的方法！我最后看了一下计时器行

timer = window.setTimeout(hide, 500);

我决定尝试将其改为

timer = window.setTimeout(hide, 100);

这给我带来了很大的不同！

使用计时器显示子菜单的问题

1 个答案: