mouseout（）菜单或子菜单后jQuery关闭当前子菜单

Question

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

就像这样：

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

我该怎么做？

谢谢。

Answer 1

试试这个。用mouseleave

隐藏所有内容

＆＃13;

＆＃13;

$('.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);
});

＆＃13;

.submenu2{
  display: none;
}

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

首先，您需要修复HTML li 必须位于 ul 标记下，然后使用悬停功能切换子菜单：

RemovalAll

List<Marks> marks = new List<Marks>()
{
        new Marks("Maths", 90),
        new Marks("Science", 80),
        new Marks("Physics", 95)
};

var students = new Student(marks);

students.Marks.RemoveAll(x => x.Subject != "Maths");

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

Answer 3

试试这个纯css解决方案：

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;