마우스가 드롭 다운 메뉴의 하위 메뉴에있는 동안 상위 메뉴를 유지하는 방법

안녕하세요 여러분, 하위 메뉴에서 마우스를 움직이는 동안 상위 메뉴를 유지하는 방법을 궁금합니다.마우스가 드롭 다운 메뉴의 하위 메뉴에있는 동안 상위 메뉴를 유지하는 방법

저는 jQuery의 초보자이며 조언이나 제안을 도와 주셨습니다.

jQuery를 코드

// Navigation Slide // 
var navHover = function() { 
    $("#S" + this.id).animate({top: '-40px'}, 300, 'swing') 
    $(this).animate({paddingTop: '30px'}, 300, 'swing').animate({paddingTop: '45px'}, 300, 'swing') 
    $("#I" + this.id).animate({top: '-10px'}, 300, 'swing').animate({top: '0px'}, 300, 'swing') 
} 
var navRelease = function() { 
    $("#S" + this.id).animate({top: '-130px'}, 300, 'swing'); 
} 

$('#navInside a.topLevel').hover(navHover, navRelease); 


// Dropdown animation  
      function mainmenu(){ 
      jQuery(" #navInside ul ").css({display: "none"}); // Opera Fix 
      jQuery(" #navInside li").hover(function(){ 
        jQuery(this).find('ul:first').css({visibility: "visible",display: "none"}).slideDown(500); 
        },function(){ 
        jQuery(this).find('ul:first').css({visibility: "hidden"}); 
        }); 
      } 

      jQuery(document).ready(function(){     
       mainmenu(); 
      });

탐색 HTML

<div id="navInside"> 
<li><a class="topLevel" href="">Home</a></li> 
<li><a class="topLevel" href="">Options</a> 
    <ul> 
     <li><a href="">Submenu 1</a></li> 
     <li><a href="">Submenu 2</a></li> 
    </ul> 
</li> 
<li><a class="topLevel" href="">Thanks</a></li>

출처

2010-11-29 Omegakenshin

멋진 메뉴! 관련 html, css 및 jQuery를 여기에 게시하거나 바이올린으로 게시하여보다 나은 도움을받을 수 있습니까? –

좋아요. 코드를 추가하십시오 ^^ 도움이 되길 바랍니다 ^^ 감사합니다. – Omegakenshin

문제는 최상위 호버이 < > 요소 것입니다. 하위 메뉴로 이동하면 하위 메뉴 요소가 < >의 자식이 아니기 때문에 < > 요소에서 발생하지만 <은 > 인 하위 요소로 인해 mouseleave 이벤트가 실행됩니다. 대신이 시도 :

$('#navInside a.topLevel').parent().hover(navHover, navRelease);

을 BTW - 당신은 호버 기능 내에서 $ (이)를 사용하여 navHover/navRelease 코드를 단순화 할 수 있습니다. 그렇게하면 요소에 특정 ID가 필요하지 않습니다. 현재 요소를 기준으로 상대방을 찾습니다.

출처

2010-11-29 18:33:41

답장을 보내 주셔서 감사합니다. 조금 문제가 있었지만 이드를 움직이면 ^^ – Omegakenshin

JS를 전혀 필요로하지 않습니다. 아래 설명에 대한 설명은 입니다.

의 하위 항목 인 ul을 표시하려는 경우에만 마우스를 올려 놓으십시오. 그것은 li ul (mouseout 상태) 및 li:hover ul (mouseover 상태)에 의해 처리됩니다.

위로 가져 가면 LI가 표시되기 때문에 LI의 높이가 변경되므로 (LIs) 영역 (텍스트 포함)을 벗어나지 않는 한 계속 볼 수 있습니다 + UL).

일부 애니메이션이 필요한 경우 CSS 전환을 확인하십시오. 브라우저 지원은 불규칙하지만 어쩌면 당신이하려는 일은 보편적으로 지원 될 것입니다. 영역이 변하는 요소에서 마우스 오버/아웃 이벤트를 정확하게 판단하는 것은 까다로울 수 있습니다. 이 실제로 인 경우에만 JS를 사용하는 것이 좋습니다.

출처

2010-11-29 18:41:34 aditya

녹색 슬라이더의 애니메이션이 문제입니다. – Omegakenshin

마우스가 드롭 다운 메뉴의 하위 메뉴에있는 동안 상위 메뉴를 유지하는 방법

답변

관련 문제