Question

我有导航：

<li class="sliding-element zobrazSubMenu">
    <a href="/Antivirusy.html">Antivírusy</a>
    <div class="sub-content">Bla blabla</div>
</li>
<li class="sliding-element zobrazSubMenu">
    <a href="/Virusy.html">Virusy</a>
    <div class="sub-content">Some content</div>
</li>

如果我将鼠标悬停在＆lt; li＆gt;上，我需要显示子内容div元素，但如果我离开鼠标，我需要添加一些超时（1秒）来隐藏子内容。

如果我先暂停＆lt; li＆gt;，然后第二次＆lt; li＆gt;，再次rist＆lt; li＆gt;，则在超时结束前（1秒），不要隐藏第一个子内容。

实例我想要的内容：http://www.designchemical.com/lab/jquery-mega-drop-down-menu-plugin/advanced-styling/黑色导航悬停。将鼠标移动到“车辆”，然后将鼠标移动到“关于我们”并再次快速“车辆”。这是我不知道的效果。

我需要这个适用于我的自定义VERTICAL菜单。

Answer 1

假设您使用jQuery，您可以这样做：

<强> HTML

<li class="sliding-element zobrazSubMenu" onmouseenter="showSubContent(this)" onmouseleave="hideSubContent(this)">
    <a href="/Antivirusy.html">Antivírusy</a>
    <div class="sub-content">Bla blabla</div>
</li>
<li class="sliding-element zobrazSubMenu" onmouseenter="showSubContent(this)" onmouseleave="hideSubContent(this)">
    <a href="/Virusy.html">Virusy</a>
    <div class="sub-content">Some content</div>
</li>

<强>的Javascript

function showSubContent(sender) {

    if (sender.timerHandle === undefined) {
        $(sender).find(".sub-content").show();
    } else {
        clearTimeout(sender.timerHandle);
        sender.timerHandle = undefined;
    }
}

function hideSubContent(sender) {
    sender.timerHandle = setTimeout(function () {
        $(sender).find(".sub-content").hide();
        sender.timerHandle = undefined;
    }, 1000);
}

<强> Working demo

Javascript导航，悬停显示，unhover隐藏超时，如何？

1 个答案: