Использование JQuery для обработки подменю

Question

Я пытаюсь сделать наименьшее меню с подменю. До сих пор, вот мой код: (». Navlink„).

<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> 

Я хотел использовать JQuery, чтобы сделать это так, на $ MouseEnter() будет появляться какие-либо подменю под ним, и на $ (“. navlink '). 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.

Вы можете сделать это с помощью JavaScript, добавив следующий код в верхней части предыдущей:

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

Я рекомендую использовать CSS, чтобы скрыть их, хотя:

.submenu{ 
    display:none 
} 

Вы надеваете» t нужно добавить эту дополнительную функцию в JavaScript.

Проверьте JSfiddle, чтобы увидеть этот код в действии!

Answer 2

Чтобы получить его, чтобы показать (Предполагая, что вы уже подменю скрыты) вы могли бы сделать что-то вроде этого

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

Загвоздка в том, что вы не хотите, чтобы скрыть его при выходе из navlink, потому что вы должны покинуть навигационную линию, чтобы перейти в подменю. Поэтому вам, вероятно, придется прикрепить скрытую часть к родительскому LI.

Также вам понадобятся устройства, которые не используют мышей ... таких как клавиатуры и сенсорные устройства.

Answer 3

Рабочая Демонстрационныйhttp://jsfiddle.net/QYEWs/

Так вы ничего о Jquery коде не упоминается вы используете использовать код mentiond в jsfiddle.

Работая демонстрация должна помочь.

Это хорошее место, чтобы начать с 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); 
});​