наведите указатель мыши на jQuery

Question

Я начинаю работать в jQuery, и у меня есть эта небольшая проблема. У меня есть это Menu1, которое при зависании отображает SubMenu. Моя проблема в том, что SubMenu скользит вниз, и я нахожу его, он скользит назад. Как мне закодировать его так, чтобы при наведении курсора на SubMenu он не скользит?

<div id="menu"> 
    <a href="#" id="items">Menu 1</a> 
</div> 

<div id="submenu"> 
    <a href="#">Sub Menu 1</a> 
    <a href="#">Sub Menu 2</a> 
    <a href="#">Sub Menu 3</a> 
</div> 

JQuery:

$(document).ready(function() 
    { 
     $('#menu').hover(
     function() 
     { 
      $('#submenu').slideDown(); 
     }, 
     function() 
     { 
      $('#submenu').slideUp(); 
     }); 
    }); 

Answer 1

Вы можете изменить HTML-разметку и гнездо HTML подменит в меню, использование tahn slideToggle в вашей hover функции

HTML:

<div id="menu"> 
    <a href="#" id="items">Menu 1</a> 
    <div id="submenu" style="display: none"> 
     <a href="#">Sub Menu 1</a> 
     <a href="#">Sub Menu 2</a> 
     <a href="#">Sub Menu 3</a> 
    </div> 
</div> 

JS:

$(document).ready(function() { 
    $('#menu').hover(function() { 
     $('#submenu').slideToggle(); 
    }); 
}); 

Демо: http://jsfiddle.net/DH5Lw/

Answer 2

Надеется, что это помогает

$(document).ready(function() 
    { 
    $('#submenu').hide(); 
    $('#menu').hover(
    function() 
    { 
     $('#submenu').slideDown(); 
    }); 
    $('#submenu').mouseout(function(){ 
     $('#submenu').slideUp(); 
    }); 
    }); 

Answer 3

HTML- Добавить дополнительный обертка ДИВ

<div id="holderDiv"> 
    <div id="menu"> 
     <a href="#" id="items">Menu 1</a> 
    </div> 
    <div id="submenu"> 
     <a href="#">Sub Menu 1</a> 
     <a href="#">Sub Menu 2</a> 
     <a href="#">Sub Menu 3</a> 
    </div> 
    </div> 

JQuery-

$("#submenu").hide(); 
    $("#menu").on('mouseover', function() { 
     $("#submenu").slideDown(500); 
    }); 

    $("#holderDiv").on('mouseleave', function() { 
      $("#submenu").slideUp(500); 
    }); 

DEMO

Answer 4

Вот ваша проблема. когда вы наводите курсор в подменю, это действие похоже на событие hover out в меню 1, поэтому подменю соскальзывает. так, чтобы предотвратить это, что вы можете сделать, это поместить подменю DIV внутри меню DIV, как показано ниже:

<div id="menu"> 
    <a href="#" id="items">Menu 1</a> 
    <div id="submenu"> 
     <a href="#">Sub Menu 1</a> 
     <a href="#">Sub Menu 2</a> 
     <a href="#">Sub Menu 3</a> 
    </div> 
</div> 

также скрыть подменю сначала, как показано ниже:

$('#submenu').hide(); 
$('#menu').hover(
    function() { 
     $('#submenu').slideDown(); 
    }, 
    function() { 
     $('#submenu').slideUp(); 
    } 
); 

Работа демо: http://jsfiddle.net/YUhWd/