Question

嗨，请参阅以下html

$(document).ready(function(){
  $(".sub").on({
     mouseenter: function (event) {
     $(".second.menu").addClass("show");
  }
  });
  $(".no-sub").on({
     mouseenter: function (event) {
     $(".second.menu").removeClass("show");
  }
  });
});

.second.menu {
  display:none;
  margin-top:5px;
}
.show {
  display:block !important;
  width:100% !important;
  overflow:hidden;
  background:wheat;
  padding:5px;
}
.nav li {
  float: left;
  min-width: 80px;
  border: 1px solid red;
  margin-right: 1px;
  overflow: hidden;
  text-align: center;
  list-style: none;
  cursor: pointer;
}

<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu first">
  <ul class="nav">
    <li class="no-sub">Home</li>
    <li class="sub color" >Color List</li>
    <li class="no-sub">Type List</li>
    <li class="no-sub">Type</li>
  </ul>
</div>
<div class="second menu">
  <ul class="nav" id="color">
      <li>Green</li>
      <li>Blue</li>
      <li>Red</li>
  </ul>
</div>
</html>

这里一切正常。但是问题是，当有人将鼠标悬停在颜色菜单上时，它将显示子菜单。但是，如果他们将鼠标悬停并转到页面的任何部分，则子菜单不会隐藏。我怎样才能做到这一点？请帮助以简单的方式获得解决方案。

Answer 1

只需在子类上使用mouseleave如下：

$(document).ready(function() {
    $(".sub").on({
        mouseenter: function (event) {
            $(".second.menu").addClass("show");
        }
    });
    $(".sub").on({
        mouseleave: function (event) {
            $(".second.menu").removeClass("show");
        }
    });
});

Answer 2

使用MouseLeave退出第二个菜单

$(document).ready(function(){
  $(".sub").on({
     mouseenter: function (event) {
     $(".second.menu").addClass("show");
  }
  });
  $(".second.menu").on({
     mouseleave: function (event) {
     $(".second.menu").removeClass("show");
     }
  });
  $(".no-sub").on({
     mouseenter: function (event) {
     $(".second.menu").removeClass("show");
  }
  });
});

.second.menu {
  display:none;
  margin-top:5px;
}
.show {
  display:block !important;
  width:100% !important;
  overflow:hidden;
  background:wheat;
  padding:5px;
}
.nav li {
  float: left;
  min-width: 80px;
  border: 1px solid red;
  margin-right: 1px;
  overflow: hidden;
  text-align: center;
  list-style: none;
  cursor: pointer;
}

<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu first">
  <ul class="nav">
    <li class="no-sub">Home</li>
    <li class="sub color" >Color List</li>
    <li class="no-sub">Type List</li>
    <li class="no-sub">Type</li>
  </ul>
</div>
<div class="second menu">
  <ul class="nav" id="color">
      <li>Green</li>
      <li>Blue</li>
      <li>Red</li>
  </ul>
</div>
</html>

Answer 3

您应该将.mouseleave()附加到新的事件处理程序，以离开子菜单本身。另外，请尝试使用.hide()和.show()

https://api.jquery.com/mouseleave/

$(document).ready(function(){
    $(".sub").on({
        mouseenter: function (event) {
            $(".second.menu").show();
        }
    });
    // add this event handler 
    $(".second").on({
        mouseleave: function (event) {
    	    $(".second.menu").hide();
        }
    });
    $(".no-sub").on({
        mouseenter: function (event) {
            $(".second.menu").hide();
        }
    });
});

.second.menu{
   display:none;
   margin-top:5px;
 }
 .show{
   display:block !important;
   width:100% !important;
   overflow:hidden;
   background:wheat;
   padding:5px;
 }
 .nav li{
   float: left;
   min-width: 80px;
   border: 1px solid red;
   margin-right: 1px;
   overflow: hidden;
   text-align: center;
   list-style: none;
   cursor: pointer;
  }

<html>
  <div class="menu first">
     <ul class="nav">
       <li class="no-sub">Home</li>
       <li class="sub color" >Color List</li>
       <li class="no-sub">Type List</li>
       <li class="no-sub">Type</li>
     </ul>
  </div>
  <div class="second menu">
     <ul class="nav" id="color">
     <li>Green</li>
     <li>Blue</li>
     <li>Red</li>
     </ul>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</html>

在悬停时显示不同div上的子菜单

3 个答案: