延迟下拉菜单

Question

当您将鼠标悬停在主菜单项上时，第一项的延迟使菜单项保持打开状态，而鼠标已经位于第二个菜单项上。请参阅下面的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();
});

Answer 1

您可以将append（1000）与一些延迟值一起使用。希望它能起作用！