绝对位置的高度不起作用并阻止 jquery 工作（示例）答案

【问题标题】：height for absolute position is not working and stopping jquery from working (example)绝对位置的高度不起作用并阻止 jquery 工作（示例）
【发布时间】：2012-02-23 17:48:50
【问题描述】：

请看这个http://jsfiddle.net/xhpqa/4/ 如果鼠标悬停在子菜单 div 上，它会一直隐藏，因为它没有高度（如果我指定高度或最小高度和最大高度它不展开，则随着内容展开）

【问题讨论】：

标签： jquery css height css-position

【解决方案1】：

在您的代码中添加这一行，它将达到您的目的。请检查我是否在适当的位置添加了一些 CSS 样式：

编辑：

   $(document).ready(function() {
// getting links from db and show sub_menu div //
    $(".menu_item").mouseover(function(){
        $(this).children().slideDown(100,function(){});
        $(this).children(".sub_menu").css({'display':'block'});
    });

// hiding sub_menu div //
    $(".menu_item").mouseout(function(){
        $(this).children(".sub_menu").slideUp(100);
        $(this).children(".sub_menu").css({'height':'auto', 'display':'none' });
    });

// keeping sub_menu div visible on mouse over //
    $(".sub_menu").mouseover(function() {
        $(this).stop();
        $(this).css({'display':'block'});
    });

        $(".sub_menu").mouseout(function() {
        $(this).parent().css("background-image","url(images/menu_bg.gif)");
        $(this).slideUp(10);
            $(this).css({'height':'auto', 'display':'none'});

    });

// document ready end
});

因为你使用的是jQuery的slideUp和slideDown函数。

当您快速将鼠标悬停/移出时，高度未正确设置为您的子菜单 div。

当您的元素为 display:block（即可见）并且其高度从实际高度开始直到变为零 (0) 时，就会发生上滑。

当元素的高度开始从零（0）增加到它的实际高度并且它是display:none（即隐藏）时，会发生slideDown。

【讨论】：