Question

所以我有这个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%;
}

我错过了什么？

Answer 1

您可以采取一些措施来改进代码并使其正常运行：

文档就绪事件。您应该在呈现DOM后初始化您的代码，否则您的代码可能会尝试将事件附加到尚未存在的事物上！
```
$(document).ready(function(){
   menuHover();
   $('.submenu').width(menuWidth);
});
```
范围。提及计时器对象内的$(this)将不会引用您的想法！在函数顶部定义要引用的元素，然后可以在同一范围内定义的任何函数中安全地使用此显式定义，并且您不必担心它们自己的'this'是不同的
```
function () {
    var $listItem = $(this);

    if (timer) {
        clearTimeout(timer);
        timer = null;
    }
    timer = setTimeout(function () {
        $listItem.css('overflow', 'visible');
    }, 200);
}
```
语义。命名列表项overflow-hidden在语义上是不好的做法（这是一种不是名字的样式！）...尤其是当项目位于{{ 1}}状态！建议可以完全删除它，并通过像overflow-visible之类的东西来定位你的列表项，或者给它们自己的类例如。 .menu li。
```
menu-item
```

Answer 2

你有两件事完全错了。

首先：你错过了jQuery ready事件¹ 第二：你没有考虑范围²。 $（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

Answer 3

CSS3过渡

使用转换（-webkit，-moz，-ms），您甚至不需要javascript。

您可以使用类或id来控制子元素。

<强> CSS

#menu{

}
#menu>div{
 width:33%;
 float:left;
 height:20px;
 background-color:grey;
}
#menu>div>div:nth-child(1){
 line-height:20px;
 text-align:center;
}
#menu>div>div:nth-child(2){
 overflow:hidden;
 height:0px;
 transition:height 700ms ease 500ms;
 /*
 the duration is 700milliseconds and the delay is 500milliseconds
 */
 background-color:#cc2;
 padding:0 16px;
}
#menu>div:hover>div:nth-child(2){
 height:20px;
}

<强> HTML

<div id="menu">
 <div><div>one</div><div>1</div></div>
 <div><div>two</div><div>2</div></div>
 <div><div>three</div><div>3</div></div>
</div>

<强>样本

http://jsfiddle.net/95wM2/

Answer 4

.menu {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: green;
}
.overflow-hidden {
    display: inline-block;
    width: 33%;
    height: 20px;
    text-align: center;
    position: relative;
    cursor: pointer;
}
.submenu {
    display: none;
}
.overflow-hidden:hover .submenu {
    display: inline-block;
    height: 200px;
    background-color: #999;
    z-index: 1;
    width: 100%;
    position: absolute;
    left: 0;
    top: 20px;
}
.container {
    width: 100%;
}

Answer 5

你不需要jquery，你可以使用伪类:hover

看到这个小提琴：http://jsfiddle.net/yA6Lx/14/

.overflow:hover .submenu{
    visibility: visible;
    opacity: 1;
}

延迟下拉菜单 - 不工作

5 个答案: