Блог

При наведении курсора мыши на пункты главного меню задержка первого пункта сохраняет пункт меню открытым, в то время как мышь уже находится на втором пункте меню. Смотрите gif ниже.

Как я смогу это исправить? Сохранение задержки, но при открытии другого меню мгновенно скрывает пункт меню.

Проблема,

структура html (сжатая для лучшего просмотра):

 <div>
  <ul class="menu_type_top">
    <li><a href="#">Hello</a><li/>
    <li><a href="#">hi</a>
    <ul> 
      <li><a href="#">Hello</a></li>
      <li><a href="#">hi</a></li>
    </ul>
    
    <li/>
    <li><a href="#">ok</a><li/>
    
  </ul>
</div>
  

Код в javascirpt для исправления:

 $('ul.menu_type_top > li').on('mouseover', function(e){
  var ulObj = $(this).find("ul:first");
  console.log(ulObj);
  ulObj.show();
  var menu_height = ulObj[0].clientHeight   300;
  $('ul.menu_type_top').css({ height: menu_height });//pokazanie podmenu bo warstwa jest w divie gdzie overflow: hidden
}).on('mouseout', function(e){
  setTimeout( function(){ ulObj.hide(); }, 2000);          
  $('ul.menu_type_top').css({ height: 40 });//powrót do normalnej wysokości menu
});


$('ul.menu_type_top li li').on('mouseover',function(e){
  $('ul:first',this).show();
}).on('mouseout',function(e){
  $('ul:first', this).hide();
});
  

Вы можете использовать append(1000) с некоторыми значениями задержки.Надеюсь, это сработает!