절대 위치의 높이가 작동하지 않고 jquery가 작동하지 않는 경우 (예)

Question

http://jsfiddle.net/xhpqa/4/ sub_menu div는 높이가 없기 때문에 mouseover하면 숨기기를 유지합니다 (height 또는 min-height를 지정하면 내용이 확장됩니다. 최대 높이가 확장되지 않음)

Answer 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에 올바르게 설정되지 않았습니다.

slideUp는 요소가 display:block (즉, 표시됨)이고 높이가 실제 높이에서 0으로 시작될 때 발생합니다.

slideDown은 요소 높이가 0에서 실제 높이로 증가하기 시작할 때 발생하며 display:none (즉 숨김)입니다.