jQuery 在 mouseout() 菜单或子菜单后关闭当前子菜单答案

【问题标题】：jQuery close current submenu after mouseout() menu or submenujQuery 在 mouseout() 菜单或子菜单后关闭当前子菜单
【发布时间】：2017-07-13 20:59:59
【问题描述】：

我正在处理这个jSFiddle。我的解决方案有效，但我需要在 mouseout() 之后关闭子菜单的东西，当前它打开子菜单项或当 mouseout() 子菜单 2 时，因为当我离开子菜单 2 或我在下一个项目时，我不想看到以前的子菜单 2。

简单来说就是这样：

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

我该怎么做？

谢谢。

【问题讨论】：

标签： javascript jquery css

【解决方案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>

【讨论】：

【解决方案2】：

首先你需要修复你的 HTML li 必须在 ul 标签下然后使用悬停功能切换子菜单：

$(".menu li").hover(
  function() {
    $('.submenu.'+ $(this).attr('class')).slideDown(600);
  },
  function() {
     $('.submenu.'+ $(this).attr('class')).slideUp(600);
  }
);

.submenu {
  display: none;
}

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

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

<ul class="submenu item152">
  <li>submenu for item 152</li>
  <li>submenu for item 152</li>
  <li>submenu for item 152</li>
</ul>
<ul class="submenu item153">
  <li>submenu for item 153</li>
  <li>submenu for item 153</li>
  <li>submenu for item 153</li>
</ul>

【讨论】：

【解决方案3】：

试试这个，纯 css 解决方案：

ul.submenu li{
  position:relative
}

.submenu2{
  position:absolute;
  top:20px;
  left:0;
  display: none;
  list-style-type: none;
  padding:0px
}


ul.submenu li:hover ul.submenu2{
  display: block;
  
}

ul.submenu2 li:hover{
  display: block;
  top:10px
}

.submenu ul li{
  
  padding-right: 10px;
}


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

<ul class="submenu">
<li class="item152">
Item 152
<ul class="submenu2">
<li>submenu for item 152</li>
<li>submenu for item 152</li>
<li>submenu for item 152</li>
</ul>
</li>
<li class="item153">
Item 153
<ul class="submenu2">
<li>submenu for item 153</li>
<li>submenu for item 153</li>
<li>submenu for item 153</li>
</ul>
</li>
</ul>

【讨论】：