鼠标离开时隐藏下拉列表

时间：2018-05-20 05:58:57

标签： jquery html css

我正在创建一个带下拉列表的导航栏，如下所示。

当我的指针离开导航栏菜单和下拉列表时，我可以这样做，下拉列表会被隐藏吗？我尝试了hover，mouseenter和mouseleave，但由于我并不真正了解其中的差异而且我是新手，因此我陷入了困境。

我已经考虑过使用css :hover触发下拉列表显示，但由于我有下拉放置功能，因此它们看起来完全不起作用。

任何帮助表示赞赏。 ：）

$(".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>

1 个答案:

答案 0 :(得分：1)

正如我在评论中所说：

  

你下载导航的html结构有点不对，你应该   将<ul>子菜单放在<li>父级内。你已经显示子菜单了   父母。

但是根据您当前的html，您可以show上的mouseover菜单，并将其隐藏在mouseleave上，如下所示：

$(".submenu-dropdown").mouseleave(function(){
$(this).hide();
});

$(".navbar-menu-each").mouseover(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>

这是干净且纯粹的CSS版本，具有正确的html结构，您也可以在html中添加子菜单，但我会为您保留该部分：

<强> JSFiddle

相关问题
最新问题