如何使下拉菜单在一定时间后消失 JavaScript.

How to make dropdown menu disappear after a certain amount of time JavaScript

本文关键字：消失 JavaScript 定时间 何使 下拉菜单      更新时间：2023-09-26

我有一个侧边菜单，当您将鼠标悬停在标签内的第一部分时，它会下拉。我想知道如何让 JavaScript 代码重复自己，以在一定时间后再次检查列表处于什么状态，以便菜单关闭。谁能帮我？

.HTML

   <div class = "sidebarwrap">
    <ul>
       <li>
        <a href="#" onmouseover="toggle(this); return true;" onmouseout="timer()">Section One</a>
            <ul>
               <li><a href="#" >link page</a></li>
               <li><a href="#" >link page</a></li>
               <li><a href="#" >link page</a></li>
               <li><a href="#" >link page</a></li>
            </ul>
       </li>
     </ul>
   </div>

.CSS

.sidebarwrap{
    width:auto;
    height:auto;
}
.sidebarwrap ul{
    float:left;
    display:block;
    background:white;
    padding:10px;
    margin-right:30px;
    margin-left:10px;
    list-style-type:none;
    border:1px dotted #0099CC;
    border-radius:100px/10px;
}
.sidebarwrap ul ul{
    list-style-type:none;
    display:none;
    border:0px dotted #0099CC;
    border-radius:20px/60px;
}
.sidebarwrap li li{
    list-style-type:circle;
    border:0px dotted #0099CC;
    border-radius:20px/60px;
    padding:5px;
}

JavaScript

var cssNode = document.createElement('link');
cssNode.setAttribute('rel','stylesheet');
cssNode.setAttribute('type','text/css');
cssNode.setAttribute('href', 'javascript-overrides.css');
document.getElementsByTagName('head') [0].appendChild(cssNode);

function toggle(toggler) {
    if(document.getElementById){
        targetElement = toggler.nextSibling;
        if(targetElement.className == undefined){
        targetElement = toggler.nextSibling.nextSibling;
        }
        if (targetElement.style.display == "block")
        {
        targetElement.style.display = "none";
        }
        else
        {
        targetElement.style.display = "block";
        timer();
        }
    }
}
function timer(){
     var Time = setTimeout(function(){toggle(toggler)},1000);
}

你可以在jQuery中使用.hover（）方法做到这一点。只需在页面加载时绑定到链接即可。

$(document).ready(function () {
    $("a").hover(function () {
       $(this).next().slideDown(); 
    },
    function () {
        $(this).next().delay(1000).slideUp();
    });
});

请参阅工作示例：http://jsfiddle.net/WFN6q/

下面是 Vanilla JS 中的一个工作示例：

<ul>
    <li>
        <a href="#" onmouseover="showMenu(this)" onmouseout="hideMenu(this)">Section One </a>
        <ul>
            <li>text</li>
            <li>text</li>
            <li>text</li>
            <li>text</li>
        </ul>
    </li>
</ul>

对应JS：

    function showMenu(myLink) {
        myLink.nextElementSibling.style.display = 'block';
    }
    function hideMenu(myLink) {
        var ulElem = myLink.nextElementSibling;
        if (ulElement.style.display === 'block') {
            setTimeout(function () { myLink.nextElementSibling.style.display = 'none' }, 1000);
        }
    }

我注意到在您的代码中，您将 onmouseout 设置为调用 timer（），这将创建一个未定义toggler的无关超时函数。 此外，您的代码将无限期地追索，~每 1000 毫秒一次。

应定义一个全局计时器变量来保存计时器引用。这样，此函数可以退出，您可以取消或以其他方式操作计时器。同样，您可以在此处实现单例模型，并防止您拥有许多计时器。

var Timers = {}; // create a Timers object to hold our timers.
function timer(target){
    Timers.sectionOne = setTimeout(function(){ toggle(target); }, 1000);
}

编辑：除了@Bic描述的方法之外，我还会采取这个，这非常优雅。

相关文章：