Прекратить закрытие выпадающего меню на Hover

У меня есть раскрывающееся меню, которое отображается при наведении. Меню скрывается снова после того, как мышь от него, и я не могу щелкнуть ни на одном из подменю.Прекратить закрытие выпадающего меню на Hover

$('.toggle-menu').on('hover',function(e){ 
     e.preventDefault(); 
     $(this).parent().siblings().children('.toggle-menu').removeClass('show').next().slideUp(); 
     $(this).toggleClass('show').next().slideToggle(); 
     e.stopPropagation(); 
});

Как я могу остановить закрытие выпадающего меню, если мышь наводится на раскрывающийся контейнер?

My jsFiddle Example

Любая помощь очень ценится! Спасибо огромное!

источник

2013-09-10 Mustapha Aoussar

Решение Mouseover имеет небольшую проблему, если вы попали в меню слишком быстро, когда он втягивается.

Используйте литий в качестве родителя:

$('.toggle-menu-parent').on('hover', function(e){  
     e.preventDefault(); 

     $(this).siblings().children('.toggle-menu').removeClass('active').next().slideUp(); 

     $(this).find('.toggle-menu').toggleClass('active').next().slideToggle(); 

    e.stopPropagation(); 
});

http://jsfiddle.net/3uLxb/16/

источник

2013-09-10 14:32:44 chrisarton

Это, как, мой ответ: D –

+1 для вас ........... –

Извините, Иван просто видел, что мы сделали это очень симулятивно, но вы были первыми! – chrisarton

использование Mouseover вместо парения

изменение

$('.toggle-menu').on('hover',function(e){

$('.toggle-menu').on('mouseover',function(e){

источник

2013-09-10 14:18:05

Я имел ту же идею. Может понадобиться «щелчок», чтобы закрыть или скрыть? – McPhelpsius

вот решение мыши/мышиное решение http://jsfiddle.net/3uLxb/14/ –

Большое вам спасибо Joao! –

использование Mouseover и MouseOut событие справиться с этим.

$('.toggle-menu').on('mouseover',function(e){...

проверить это http://jsfiddle.net/nkNUz/ использование MouseOut событие, чтобы скрыть согласно вашей логике

источник

2013-09-10 14:20:10 developerCK

На самом деле, что вы должны сделать, это инкапсулировать <li> с в дивы с overflow:hidden и вашим height набор, который только «Меню» показ позиции.

На hover вы должны animate ваш height вниз, чтобы показать все <li> с. Вам не нужно будет mouseover или mouseout отдельно, если вы выбрали <div> в качестве элемента jQuery.

источник

2013-09-10 14:26:12 McPhelpsius

$('.toggle').on('hover',function(e){ 
     e.preventDefault(); 
     $(this).siblings().children('.toggle-menu').removeClass('active').next().slideUp(); 
     $(this).find('.toggle-menu').toggleClass('active').next().slideToggle(); 
     e.stopPropagation(); 
});

HTML

<ul class="nav"> 
    <li class="toggle"> 
     <a href="#" class="toggle-menu"><span></span>MENU 1</a> 
     <ul class="menu1"> 
      <li><a href="#">Item 1</a></li> 
      <li><a href="#">Item 2</a></li> 
      <li><a href="#">Item 3</a></li> 
     </ul> 
    </li> 
    <li class="toggle"> 
     <a href="#" class="toggle-menu"><span></span>MENU 2</a> 
     <ul class="menu2"> 
      <li><a href="">Item 1</a></li> 
      <li><a href="">Item 2</a></li> 
     </ul> 
    </li> 
</ul>

http://jsfiddle.net/3uLxb/15/

источник

2013-09-10 14:26:23

Прекратить закрытие выпадающего меню на Hover

ответ

Смежные вопросы