jQuery slideDown 및 slideUp 하위 메뉴

Question

jQuery 함수 slideUp 및 slideDown에 약간의 문제가 있습니다. jsBin Demo

나는 그 아래에 수직 하위 메뉴로 수직 메뉴가 있습니다.

사용자가 하위 메뉴가있는 메뉴 항목을 입력 할 때 표시해야합니다.이 부분은 작동하고있는 부분입니다.

사용자가 메뉴 항목을 떠났고 하위 메뉴 항목으로 이동하면 여전히 볼 수 있어야합니다. 이 문제는 1500ms 후에 하위 메뉴 (slideUp)를 제거하는 setTimeout 함수로 잡으려고했습니다. 사용자가 그 시간에 마우스를 하위 메뉴로 이동하면 setTimeout이 지워집니다 (clearTimeout)

그러나 사용자가 주 메뉴 항목 위로 마우스를 빠르게 움직이면 모든 하위 메뉴가 표시되고 원래 페이지의 내용이 표시됩니다 밀어 넣을거야.

이미지 : http://i43.tinypic.com/5ww8yq.png

이 내가 모든 주요 메뉴 항목을 통해 매우 빠르게 내 마우스를 움직일 때입니다.

표시 방법 : 사용자가 마우스를 주 메뉴 항목으로 이동하면 하위 메뉴가 표시되어야합니다. 다른 주 메뉴 항목으로 이동하면 현재의 하위 메뉴가 보이지 않아야하고 다른 하위 메뉴가 표시되어야합니다.

#menu 
{ 
     background-color: white; 
     width: 1000px; 
     margin-top: 10px; 
     height: 30px; 
     position: relative; 
} 
#menu ul li 
{ 
     float: left; 
     display: inline; 
     width: 125px; 
     height: 30px; 
     line-height: 30px; 
     text-align: center; 
} 
#menu ul li.right { float: right; } 
#menu ul li a 
{ 
     top: 5px !important; 
     text-decoration: none; 
     font-size: 20px; 
     height: 30px; 
     color: #01224D; 
} 
.submenu 
{ 

     background-color: #01224D; 
     width: 1000px; 
     height: 30px; 
     color: white; 
     display: none; 
} 
.submenu ul li 
{ 
     display: inline; 
     width: 100px; 
     height: 30px; 
     line-height: 30px; 
     float: left; 
     text-align: center; 
} 
.submenu ul li.right { float: right; } 
.submenu ul li a 
{ 
     text-decoration: none; 
     font-size: 20px; 
     height: 30px; 
     color: white; 
} 

HTML :

<div id="menu"> 
     <ul> 
       <li><a href="index.php">Home</a></li> 
       <li> 
         <a class="mainMenuA" id="menu-1" href="#">Lederwaren</a> 
       </li> 
       <li><a class="mainMenuA" id="menu-2" href="#">Tassen</a></li> 
       <li><a class="mainMenuA" id="menu-3" href="#">Koffers</a></li> 
       <li><a class="mainMenuA" id="menu-4" href="#">Kleding</a></li> 
       <li><a class="mainMenuA" id="menu-5" href="#">Accessoires</a></li> 
       <li class="right"><a href="vestigingen.php">Vestigingen</a></li> 
     </ul> 
</div><!-- menu--> 
<div class="submenu" id='submenu-1'> 
     <ul> 
       <li><a href="#">Submenu</a></li> 
     </ul> 
</div><!-- submenu --> 
<div class="submenu" id='submenu-2'> 
     <ul> 
       <li><a href="#">Submenu</a></li> 
       <li><a href="#">Submenu</a></li> 
     </ul> 
</div><!-- submenu --> 
<div class="submenu" id='submenu-3'> 
     <ul> 
       <li><a href="#">Submenu</a></li> 
       <li><a href="#">Submenu</a></li> 
       <li><a href="#">Submenu</a></li> 
     </ul> 
</div><!-- submenu --> 
<div class="submenu" id='submenu-4'> 
     <ul> 
       <li><a href="#">Submenu</a></li> 
       <li><a href="#">Submenu</a></li> 
       <li><a href="#">Submenu</a></li> 
       <li><a href="#">Submenu</a></li> 
     </ul> 
</div><!-- submenu --> 
<div class="submenu" id='submenu-5'> 
     <ul> 
       <li><a href="#">Submenu</a></li> 
       <li><a href="#">Submenu</a></li> 
       <li><a href="#">Submenu</a></li> 
       <li><a href="#">Submenu</a></li> 
       <li><a href="#">Submenu</a></li> 
     </ul> 
</div><!-- submenu --> 

JS :

$(document).ready(function(){ 
       var timer; 
       var hover; 
       $('.mainMenuA').hover(
        function() 
        { 
         var id = $(this).attr('id').split('-')[1]; 
         $('#submenu-'+id).slideDown(); 
        }, 
        function() 
        { 
         var id = $(this).attr('id').split('-')[1]; 
         timer = setTimeout(function() { $('#submenu-'+id).slideUp(); },1500); 
        } 
       ); 
       $('.submenu').hover(
        function() 
        { 
         clearTimeout(timer); 
        }, 
        function() 
        { 
         var id = $(this).attr('id'); 
         timer = setTimeout(function() { $('#'+id).slideUp(); },1500); 
        } 
       ); 
      }); 

나는 누군가가 나를 도울 수 있기를 바랍니다.

Answer 1

.

Answer 2

새 광고를 표시하기 전에 표시되는 .submenu 요소를 숨기면됩니다. 나는 hide()와 slideUp()을 사용하여 2 가지 다른 방법을 시도했다. 이 jsfiddle에서 볼 수 있듯이 당신이 하위 메뉴를 표시 할 때에 submenu-open 같은 class를 추가

http://jsfiddle.net/DgqS4/

Answer 3

개인적으로 .... slideUp() 메소드를 선호, 이것은 발견하고 그것을 숨기는 데 사용됩니다 필요하다면. 호버에 기능
코드 :

$('.submenu-open').stop().hide().removeClass('submenu-open'); 
var id = $(this).attr('id').split('-')[1]; 
$('#submenu-'+id).addClass('submenu-open').slideDown(); 

이 쉽게 당신의 문제를 해결해야한다는 jsBin 데모에 그것을 테스트! 최상의 결과를 위해 필요한 경우

$('.mainMenuA').hover(function(){ 
     var id = $(this).attr('id').split('-')[1]; 
     $('#submenu-'+id).stop().slideDown(); 
},function(){ 
     var id = $(this).attr('id').split('-')[1]; 
     $('#submenu-'+id).stop().slideUp(); 
}); 

사용 stop의 매개 변수를 대신 현재 animtion 예컨대

http://api.jquery.com/stop/

을 정지 타이머 사용을 stop 기능을 사용

Answer 4

당신이이 솔루션에 열려 있는지 여부를 잘 모르겠지만 HTML에서 약간의 변경을 제안 할 것입니다. 어쨌든 당신이 하위 메뉴 div를 만들고있는 것입니다. 그렇다면 질문을 이해하면 바로 원하지 않습니다. 이동하는 페이지 내용 즉, u는 기본 메뉴 아래의 하위 메뉴에 사용할 수있는 특정 높이를 가질 수 있습니다 (귀하의 경우 30px 여야 함). 여기

입니다 내가 제안하고 당신에게 도움이 희망 것이다 솔루션,

HTML :

<!DOCTYPE html> 
<html> 
<head> 
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<meta charset=utf-8 /> 
<title>DEMO</title> 
<!--[if IE]> 
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
<![endif]--> 
</head> 
<body> 



    <div id="menu"> 
      <ul> 
        <li><a href="index.php">Home</a></li> 
        <li class="mainMenuA"> 
          <a id="menu-1" href="#">Lederwaren</a> 
          <div class="submenu" id='submenu-1'> 
            <ul> 
              <li><a href="#">Submenu</a></li> 
            </ul> 
          </div><!-- submenu --> 
        </li> 
        <li class="mainMenuA"> 
         <a id="menu-2" href="#">Tassen</a> 
         <div class="submenu" id='submenu-2'> 
           <ul> 
             <li><a href="#">Submenu</a></li> 
             <li><a href="#">Submenu</a></li> 
           </ul> 
         </div><!-- submenu --> 
        </li> 
        <li class="mainMenuA"> 
         <a id="menu-3" href="#">Koffers</a> 
         <div class="submenu" id='submenu-3'> 
           <ul> 
             <li><a href="#">Submenu</a></li> 
             <li><a href="#">Submenu</a></li> 
             <li><a href="#">Submenu</a></li> 
           </ul> 
         </div><!-- submenu --> 
        </li> 
        <li class="mainMenuA"> 
         <a id="menu-4" href="#">Kleding</a> 
         <div class="submenu" id='submenu-4'> 
           <ul> 
             <li><a href="#">Submenu</a></li> 
             <li><a href="#">Submenu</a></li> 
             <li><a href="#">Submenu</a></li> 
             <li><a href="#">Submenu</a></li> 
           </ul> 
         </div><!-- submenu --> 
        </li> 
        <li class="mainMenuA"> 
         <a id="menu-5" href="#">Accessoires</a> 
         <div class="submenu" id='submenu-5'> 
           <ul> 
             <li><a href="#">Submenu</a></li> 
             <li><a href="#">Submenu</a></li> 
             <li><a href="#">Submenu</a></li> 
             <li><a href="#">Submenu</a></li> 
             <li><a href="#">Submenu</a></li> 
           </ul> 
         </div><!-- submenu --> 
        </li> 
        <li class="right"><a href="vestigingen.php">Vestigingen</a></li> 
      </ul> 
    </div><!-- menu--> 

</body> 
</html> 

CSS :

article, aside, figure, footer, header, hgroup, 
     menu, nav, section { display: block; } 
     #menu 
    { 
      background-color: white; 
      width: 1000px; 
      margin-top: 10px; 
      height: 30px; 
      position: relative; 
    } 
    #menu ul li 
    { 
      float: left; 
      display: inline; 
      width: 125px; 
      height: 30px; 
      line-height: 30px; 
      text-align: center; 
    } 
    #menu ul li.right { float: right; } 
    #menu ul li a 
    { 
      top: 5px !important; 
      text-decoration: none; 
      font-size: 20px; 
      height: 30px; 
      color: #01224D; 
    } 
    .submenu 
    { 

      background-color: #01224D; 
      width: 1000px; 
      /*height: 30px;*/ 
      color: white; 
      display: none; 
      position: absolute; 
      left: 0; 
    } 
    .submenu ul li 
    { 
      display: inline; 
      width: 100px; 
      /*height: 30px;*/ 
      line-height: 30px; 
      float: left; 
      text-align: center; 
    } 
    .submenu ul li.right { float: right; } 
    .submenu ul li a 
    { 
      text-decoration: none; 
      font-size: 20px; 
      /*height: 30px;*/ 
      color: white !important; 
    } 

JS :

$(document).ready(function(){ 
    var openSubMenu; 
    $('.mainMenuA').hover(function(){ 
      openSubMenu = $('.submenu', $(this)); 
      openSubMenu.css({height: '30px'}); 
      openSubMenu.stop().slideDown(); 

    },function(){ 
      openSubMenu.stop().slideUp(); 
    }); 
}); 

참고 : su를 만들었습니다. 'li'엘레멘트 안에 bmenu div를 두어 서브 메뉴 div에 호버 이벤트를 쓸 필요가 없다. slideDown 여기

애니메이션

에서 경쟁 조건을 방지하기 전에 나는 '리'요소 자체에 가져가 이벤트를 할당하고있어, 나는 또한이 같은 문제를 가지고 작업 예를 하위 메뉴로 http://jsbin.com/odegik/4/edit