代码之家 › 专栏 › 技术社区 › Abilash Erikson

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

css jquery javascript

Abilash Erikson · 技术社区 · 6 年前

嗨,请看下面的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>

这里一切正常。但问题是,当有人悬停在“颜色”菜单上时,它会显示子菜单。但是如果它们悬停并转到页面的任何部分,子菜单就不会隐藏。我该怎么做?请帮助以简单的方式获得解决方案。

3 回复 | 直到 6 年前

Bráulio Figueiredo 6 年前

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>

kboul 6 年前

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

Devon Kiss 6 年前

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