javascript - 带有延迟的下拉菜单-不起作用

所以我有这个drop down menu，它在悬停时应该有稍微延迟的下降，但根本不会下降。

我的HTML：

<div class="container">
    <ul class="menu">
        <li class="overflow-hidden">one
            <div class="submenu">test</div>
        </li>
        <li class="overflow-hidden">two</li>
        <li class="overflow-hidden">three</li>
    </ul>
</div>

的CSS

.menu {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
}
.overflow-hidden {
    display: inline-block;
    width: 33%;
    height: 20px;
    text-align: center;
    overflow: hidden;
    cursor: pointer;
}
.submenu {
    display: block;
    height: 200px;
    background-color: #999;
}
.container {
    width: 100%;
}

我错过了什么？

最佳答案

你有两件事完全错了。

第一：您缺少jQuery ready事件1。
第二：您没有考虑范围2。 $（this）在setTimeout（）中不可用；

$(function(){ // (1a) jQuery ready start

    var menuWidth = $('.container').width();

    var menuHover = function(){

        var timer;

        $(".overflow-hidden").hover(

            function(){

                if(timer){
                    clearTimeout(timer);
                    timer = null;
                }

                var temporary_element = $(this); // (2a) Store element in temporary variable

                timer = setTimeout(function(){
                    temporary_element.css('overflow', 'visible'); // (2b) Get the stored element from the parent scope
                }, 200);

            },

            function(){

                clearTimeout(timer);
                timer = null;
                $(this).css('overflow', 'hidden');

            }

        );

    };

    menuHover();

    $('.submenu').width(menuWidth);

}); // (1b) jQuery ready end