javascript - jQuery 在 mouseout() 菜单或子菜单后关闭当前子菜单

Question

我正在使用这个 jSFiddle . 我的解决方案有效，但我需要在 mouseout() 当前打开子菜单项或 mouseout() submenu2 之后关闭子菜单，因为当我离开 submenu2 或我在下一个元素时我不不想看到以前的子菜单 2。

就像这样:

if ($.submenu li.item152 == mouseout() || $.submenu2'.eq(0) == mouseout()){
 $('.submenu2').eq(0).slideUp(600);}

我该怎么做？

谢谢。

Answer 1

试试这个。使用 mouseleave 隐藏所有内容

$('.submenu li.item152').hover(function() {
$('.submenu2').eq(0).slideDown(600);
$('.submenu2').eq(1).slideUp(600);
});	

$('.submenu li.item153').hover(function() {
$('.submenu2').eq(1).slideDown(600);
$('.submenu2').eq(0).slideUp(600);
});	

$('.submenu2').mouseleave(function(){
$('.submenu2').slideUp(600);
});

.submenu2{
  display: none;
}

.submenu li{
  display: inline-block;
  padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="submenu">
<li class="item152">
Item 152
</li>
<li class="item153">
Item 153
</li>
</div>

<div class="submenu2">
<li>submenu for item 152</li>
<li>submenu for item 152</li>
<li>submenu for item 152</li>
</div>
<div class="submenu2">
<li>submenu for item 153</li>
<li>submenu for item 153</li>
<li>submenu for item 153</li>
</div>