JQuery를 사용하여 하위 메뉴 처리

Question

하위 메뉴가 가능한 가장 작은 메뉴를 만들려고합니다. ('. navlink') : 지금까지, 여기에 내 코드입니다. 나는 $에 그렇게를 만들기 위해 jQuery를 사용하고자하고

<div id="ctl100_cphHeader_NavigationBar"> 
    <li></li> <!-- makes first left-border in css --> 
    <li><a class="navlink" href="/ComingSoon.aspx">N/A</a></li> 
    <li><a class="navlink" href="/ComingSoon.aspx">N/A</a></li> 
    <li> 
     <a class="navlink" href="/ComingSoon.aspx">N/A</a> 
     <div class="submenu"> 
      <a class="navlink" href="/">Home</a> 
      <a class="navlink" href="/">Home</a> 
     </div> 
    </li> 
    <li> 
     <a class="navlink" href="/ComingSoon.aspx">N/A</a> 
     <div class="submenu"> 
      <a class="navlink" href="/ComingSoon.aspx">Coming Soon</a> 
     </div> 
    </li> 
</div> 

mouseenter() 그 아래에있는 모든 하위 메뉴 (표시, 및 $에 대한 것입니다 '. navle '). mouseleave() 아래의 모든 하위 메뉴가 사라집니다. 어떻게하면됩니까? 나는 jquery에 익숙하지 않고 선택자에게는 좋지 않다.

Answer 1

다음 스크립트 시도 : 난 그냥 가져가 기능을 사용

$(document).ready(function() { 
    var speed = 500;//The speed is in milliseconds 
    $('li').hover(function() { 
     //show its submenu 
     $(this).children('.submenu').stop().slideDown(speed); 
     }, 
     function() { 
     //hide its submenu 
     $(this).children('.submenu').stop().hide(speed);  
    }); 
});​ 

가 첫 번째 function(){... 인을 onMouseEnter 및 두 번째 function(){...은 onMouseLeave입니다. 또한 하위 메뉴가 display:none 일 필요가 있음을 기억하십시오.

.submenu{ 
    display:none 
} 

당신은 '돈을 : 그래도 난 그들을 숨기려면 CSS를 사용하는 것이 좋습니다

$('.submenu').hide(); 

: 당신은 이전의 상단에 다음 코드를 추가하여 자바 스크립트로 이것을

할 수 자바 스크립트에서 추가 기능을 추가해야합니다.

JSfiddle을 확인하십시오.

Answer 2

것은, 당신이 navlink을 떠날 때 그것을 숨기려하지 않는 것이 당신이

$('.navlink').hover(function(){ 
    $(this).siblings('submenu').show(); 
}) 

캐치처럼 뭔가를 할 수 (이미 하위 메뉴가 숨겨져 가정) 보여 얻으려면 당신 때문에 하위 메뉴로 이동하려면 탐색 링크를 종료해야합니다. 따라서 숨어있는 부분을 부모 LI에 붙여야 할 가능성이 큽니다.

또한 키보드 및 터치 장치와 같이 마우스를 사용하지 않는 장치도 고려해야합니다.

Answer 3

작업 데모 당신이 jsfiddle의 코드 mentiond를 사용하여 사용하는 jQuery 코드에 대해 아무것도 언급하지 않았으므로 http://jsfiddle.net/QYEWs/

.

실용적인 데모가 도움이 될 것입니다.

이 jQuery로 시작하는 좋은 장소입니다 http://jquery.com/

코드

// Hide inactive ones 
$('#main-nav > li:not(.current-menu-parent) .sub-menu').hide(); 

// What to do when hovering over a menu item 
$("#main-nav > li").hoverIntent({ 
    over: function(){ 
     // Find the hovered menu's sub-menu 
     var $submenu = $(this).find('.sub-menu'); 

     // Stop the animation and fade out the other submenus 
     $('.sub-menu').not($submenu).stop(true,true).fadeOut(260); 

     // Fade in the current one 
     $submenu.fadeIn(260); 
    } 
}); 

// What to do when user leaves the navigation area 
$('#main-nav').mouseleave(function(){ 
    // Fade out all inactive submenus 
    $('#main-nav > li:not(.current-menu-parent) .sub-menu').fadeOut(260); 

    // Fade in the active one 
    $('.current-menu-parent .sub-menu').fadeIn(260); 
});​