javascript - 鼠标离开时jquery隐藏下拉菜单

Question

我正在创建一个带有下拉菜单的导航栏，如下所示。

当我的指针离开导航栏菜单和下拉菜单时，我可以隐藏下拉菜单吗？我尝试了 hover、mouseenter 和 mouseleave，但由于我不太了解其中的区别，而且我是新手，所以我被卡住了。

感谢任何帮助。 :)

$(".navbar-menu-each, .submenu-dropdown").hover(function() {
  var menuChoice = $(this).val();
  var menuPosition = $(this).find("a").position();
  var dropdownPosition = menuPosition.left;
  switch(menuChoice) {
    case 0: 
      $(".submenu-dropdown").html("<li class='submenu-dropdown-each'>New Employee Registration</li><li class='submenu-dropdown-each submenu-selected'>Employee List</li><li class='submenu-dropdown-each'>Employee Rehire</li><li class='submenu-dropdown-each'>Employee Without Bank Account</li><li class='submenu-dropdown-each'>Employee Without PPh 21</li>");
      break;
    case 1:
      $(".submenu-dropdown").html("<li class='submenu-dropdown-each'>Memo Template</li><li class='submenu-dropdown-each'>Print Memo</li>");
      break;
    case 2:
      $(".submenu-dropdown").html("<li class='submenu-dropdown-each'>Download & Upload</li><li class='submenu-dropdown-each'>Send Email</li>");
      break;
    case 3:
      $(".submenu-dropdown").html("<li class='submenu-dropdown-each'>Employee Data Approvals</li><li class='submenu-dropdown-each'>Employment Status Undo</li>");
      break;
    case 4:
      $(".submenu-dropdown").html("<li class='submenu-dropdown-each'>Employee Data Report</li><li class='submenu-dropdown-each'>Headcount Report</li><li class='submenu-dropdown-each'>Employee Recapitulation Report</li>");
      break;
  }
  var dropdownWidth = $(".submenu-dropdown").width();
  var rightEdge = $(document).width();
  if ((dropdownPosition + dropdownWidth) >= (rightEdge - 16)) {
    var adjustRight = rightEdge - dropdownWidth - 16;
     $(".submenu-dropdown").css({"left": adjustRight + "px"});
  }
  else {
    if (dropdownPosition <= 16) {
      $(".submenu-dropdown").css({"left": "16px"});
    }
    else {
      $(".submenu-dropdown").css({"left": dropdownPosition + "px"}); 
    }
  }
  $(".submenu-dropdown").show();
});

$(".navbar-menu-each").click(function() {
  $(".navbar-menu-each").removeClass("menu-on");
  $(this).addClass("menu-on");
});

.navbar {
  display: block; 
  width: 100%;
  position: relative;
  margin-bottom: 240px;
}

.navbar-logo-wrapper {
  position: absolute;
  height: 60px;
  width: 100%;
  top: 0;
  left: 0;
  text-align: center;
}

.navbar-logo-wrapper img {
  width: 32px;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.navbar-top {
  width: 100%;
  min-height: 60px;
  box-shadow: 0px 1px 8px 0 rgba(0,0,0,0.1);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 24px;
  box-sizing: border-box;
}

.navbar-top-left {

}

.burger-btn-wrapper {
  display: inline-block;
  text-align: center;
  margin: 0 16px 0 0;
}

.burger-btn-wrapper i {
  font-size: 16px; 
  color: #333;
  line-height: 60px;
  transform: translateY(1px);
}

.module-name {
  height: 60px;
  line-height: 60px;
  text-transform: uppercase;
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  color: #333;
}

.navbar-top-right {

}

.navbar-top-middle {
  height: 60px;
  text-align: center;
  position: relative;
  line-height: 0;
}

.modules-icon {
  vertical-align: middle;
  display: inline-block;
  width: 60px;
  text-align: center;
}

.modules-icon i {
  font-size: 16px; 
  color: #333;
  line-height: 60px;
}

.navbar-profile {
  display: inline-block;
  vertical-align: middle;
  line-height: 0;
}
.navbar-profile img {
    vertical-align: top;
}
.profpic-wrapper {
  display: inline-block;
  vertical-align: middle;
  width: 60px;
  height: 60px;
}

.navbar-profpic {
  width: 40px;
  height: 40px;
  background-color: #00c983;
  border-radius: 40px;
  position: relative;
  margin-left: 10px;
  margin-top: 10px;
}

.profile-initial {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
}

.profile-name {
  display: inline-block;
  vertical-align: middle;
  font-size: 13px;
}

.profile-dropdown {
  vertical-align: middle;
  display: inline-block; 
  margin-left: 8px;
}

.navbar-wrapper {
  display: inline-block;
  width: 100%;
}

.navbar-top-middle img {
  height: 32px; 
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.navbar-menu {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

.navbar-menu-list {
  width: 750px;
  list-style-type: none;
  margin: 0;
  padding: 15px 0;
  cursor: pointer;
  
  margin-left: 0;
}

.navbar-menu-each {
  padding-left: 32px;
  padding-right: 32px;
  
  display: inline-block;
}

.navbar-menu-each:first-child {
  padding-left: 24px; 
}

.navbar-menu-each a {
  color: #333;
  font-size: 13px;
  text-decoration: none;
}

.menu-on a {
  font-weight: 700;
  color: #00c983;
}

.navbar-page-name {
  display: block;
  font-size: 22px;
  height: 60px;
  line-height: 60px;
  border-top: solid 0.5px #DEF5ED;
  border-bottom: solid 0.5px #DEF5ED;
  background-color: #F0FBF7;
  color: #333;
  padding-left: 24px;
}

.navbar-menu::-webkit-scrollbar {
  height: 0;
}

.navbar-menu::-webkit-scrollbar-thumb {
  background-color: transparent;
}

.submenu-dropdown {
  background-color: #fff; 
  box-shadow: 0px 3px 6px 0 rgba(0,0,0,0.15);
  position: absolute;
  cursor: pointer;
  top: 106px;
}

.submenu-dropdown-each {
  display: block;
  line-height: 48px;
  font-size: 13px;
  color: #333;
  width: auto;
  padding: 0 32px 0 24px;
}

.submenu-dropdown-each:hover {
  background: #f8f8f8; 
}

.submenu-selected {
  font-weight: 700;
  color: #00c983;
}

@media (max-width: 575px) {
  .module-name {
    display: none; 
  }
  
  .profile-name {
    display: none; 
  }
  
  .modules-icon {
    display: none; 
  }
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.11/css/all.css" integrity="sha384-p2jx59pefphTFIpeqCcISO9MdVfIm4pNnsL08A6v5vaQc4owkQqxMV8kg4Yvhaw/" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" rel="stylesheet">

<div class="navbar">
  <div class="navbar-logo-wrapper">
    <img class="navbar-tree" src="https://cdn.frontify.com/api/screen/thumbnail/7UV_lfX5OBfHxFn5lc3ygK8UTU3z5pivwY9QDSDIOiFemj-DdmDzmwiPvbibaG63IMXz-MmGOs4aH-UqgoT9gw/350">
  </div>
  <div class="navbar-top">
    <div class="navbar-top-left">
      <div class="burger-btn-wrapper">
        <i class="fas fa-bars"></i>
      </div>
      <div class="module-name">Employee</div>
    </div>
    <div class="navbar-top-right">
      <div class="modules-icon"><i class="fas fa-th"></i></div>
      <div class="navbar-profile">
        <div class="profpic-wrapper">
          <div class="navbar-profpic">
            <div class="profile-initial">DJ</div>
          </div>
        </div>
        <div class="profile-name">Dennis Jonathan</div>
        <div class="profile-dropdown"><i class="fas fa-chevron-down"></i></div>
      </div>
    </div>
  </div>
  <div class="navbar-menu">
    <ul class="navbar-menu-list">
      <li class="navbar-menu-each menu-on" value=0><a href="#">Employee Directory</a></li>
      <li class="navbar-menu-each" value=1><a href="#">Memo</a></li>
      <li class="navbar-menu-each" value=2><a href="#">Bulk Update</a></li>
      <li class="navbar-menu-each" value=3><a href="#">Approvals and Undo</a></li>
      <li class="navbar-menu-each" value=4><a href="#">Report</a></li>
    </ul>
  </div>
  <div class="navbar-page-name">
    Employee List
  </div>
</div>
<ul class="submenu-dropdown">
  
</ul>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 1

在我看来，您将一个简单的过程复杂化了。

hover 功能可以很容易地仅使用 CSS 复制。

.navbar-menu-list {
  width: 750px;
  list-style-type: none;
  margin: 0;
  padding: 15px 0;
  cursor: pointer;
  margin-left: 0;
}

.navbar-menu-each {
  padding-left: 32px;
  padding-right: 32px;
  display: inline-block;
  position:relative;
}

.navbar-menu-each a {
  color: #333;
  font-size: 13px;
  text-decoration: none;
}

.navbar-menu-each:hover a {
  font-weight: 700;
  color: #00c983;
}

.navbar-page-name {
  display: block;
  font-size: 22px;
  height: 60px;
  line-height: 60px;
  border-top: solid 0.5px #DEF5ED;
  border-bottom: solid 0.5px #DEF5ED;
  background-color: #F0FBF7;
  color: #333;
  padding-left: 24px;
}

.submenu-dropdown {
  display: none;
  background-color: #fff;
  box-shadow: 0px 3px 6px 0 rgba(0, 0, 0, 0.15);
  position: absolute;
  cursor: pointer;
  top: 20px;
  left:0;
}

.navbar-menu-each:hover > .submenu-dropdown,
.submenu-dropdown:hover{
  display: block;
}

.submenu-dropdown-each {
  display: block;
  line-height: 48px;
  font-size: 13px;
  color: #333;
  width: auto;
  padding: 0 32px 0 24px;
}

.submenu-dropdown-each:hover {
  background: #f8f8f8;
}

.submenu-selected {
  font-weight: 700;
  color: #00c983;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.11/css/all.css" integrity="sha384-p2jx59pefphTFIpeqCcISO9MdVfIm4pNnsL08A6v5vaQc4owkQqxMV8kg4Yvhaw/" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" rel="stylesheet">

<div class="navbar-menu">
  <ul class="navbar-menu-list">
    <li class="navbar-menu-each">
      <a href="#">Employee Directory</a>
      <ul class="submenu-dropdown">
        <li class='submenu-dropdown-each'>New Employee Registration</li>
        <li class='submenu-dropdown-each submenu-selected'>Employee List</li>
        <li class='submenu-dropdown-each'>Employee Rehire</li>
        <li class='submenu-dropdown-each'>Employee Without Bank Account</li>
        <li class='submenu-dropdown-each'>Employee Without PPh 21</li>
      </ul>
    </li>
    <li class="navbar-menu-each">
      <a href="#">Memo</a>
      <ul class="submenu-dropdown">
        <li class='submenu-dropdown-each'>Memo Template</li>
        <li class='submenu-dropdown-each'>Print Memo</li>
      </ul>
    </li>
    <li class="navbar-menu-each"><a href="#">Bulk Update</a>
      <ul class="submenu-dropdown">
        <li class='submenu-dropdown-each'>Download & Upload</li>
        <li class='submenu-dropdown-each'>Send Email</li>
      </ul>
    </li>
    <li class="navbar-menu-each">
      <a href="#">Approvals and Undo</a>
      <ul class="submenu-dropdown">
        <li class='submenu-dropdown-each'>Employee Data Approvals</li>
        <li class='submenu-dropdown-each'>Employment Status Undo</li>
      </ul>
    </li>
    <li class="navbar-menu-each">
      <a href="#">Report</a>
      <ul class="submenu-dropdown">
        <li class='submenu-dropdown-each'>Employee Data Report</li>
        <li class='submenu-dropdown-each'>Headcount Report</li>
        <li class='submenu-dropdown-each'>Employee Recapitulation Report</li>
      </ul>
    </li>
  </ul>
</div>