Jquery 单击和光标 : pointer only targets one element

Question

我做了一个带有下拉菜单的导航栏，如下所示。

我想这样做，当我单击右上角的 navbar-profile 类(包括个人资料图片、个人资料名称和 V 形图标)时，它会显示下拉菜单。当我尝试为 navbar-profile 创建 click 功能时，似乎我唯一可以单击以显示下拉列表的是个人资料图片。

我还尝试将光标更改为指向 navbar-profile 类的手/指针，但它只会在我将鼠标悬停在个人资料图片上时更改光标。

我搜索了一下这个问题，可能是div分层或者z-index的问题，但是我不太明白怎么解决。

感谢任何帮助:)

$(".navbar-menu-each, .submenu-dropdown").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-profile").click(function() {
  $(".profile-dropdown").toggleClass("profile-dropdown-view");
});

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

$(".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;
  color: #333;
}

.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%;
  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;
  cursor: pointer;
}

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

.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-icon {
  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,
.profile-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;
} 

.profile-dropdown {
  width: 208px;
  top: 53px;
  right: 16px;
  display: none;
}

.profile-dropdown-view {
  display: block;
}

.profile-dropdown-each {
  display: block;
  font-size: 13px;
  line-height: 36px;
  padding-left: 16px;
}

.profile-dropdown-each-section {
  color: #aaa;
  text-transform: uppercase;
  font-weight: 700;
}

.profile-dropdown-check {
  float: right; 
  margin-right: 16px;
}

.profile-dropdown-each-border-top {
  border-top: solid 1px #eee; 
}

.switch-language-group {
  float: right;
  margin-right: 16px;
}

.button-language {
  height: 24px;
  width: 32px;
  border: solid 1px #c4c4c4;
  display: inline-block;
  line-height: 24px;
  text-align: center;
}

.button-language-left {
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
  transform: translateX(4px);
}

.button-language-right {
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}

.button-language-active {
  background-color: #00c983; 
  color: #fff;
  border: solid 1px #00c983;
}

.profile-dropdown-check i {
  display: none; 
}

.profile-dropdown-check i.role-active {
  display: inline-block;
  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-icon"><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>
<ul class="profile-dropdown">
  <li class="profile-dropdown-each profile-dropdown-each-section">Role</li>
  <li class="profile-dropdown-each">
    <span>Administrator</span>
    <span class="profile-dropdown-check">
      <i class="fas fa-check role-active"></i>
    </span>
  </li>
  <li class="profile-dropdown-each">
    <span>HR Recruitment</span>
    <span class="profile-dropdown-check">
      <i class="fas fa-check"></i>
    </span>
  </li>
  <li class="profile-dropdown-each profile-dropdown-each-border-top">Change Password</li>
  <li class="profile-dropdown-each">
    <span>Language</span>
    <span class="switch-language-group">
      <a class="button-language button-language-left">ID</a>
      <a class="button-language button-language-right button-language-active">EN</a>
    </span>
  </li>
  <li class="profile-dropdown-each profile-dropdown-each-border-top">Log Out</li>
</ul>

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

Answer 1

将它添加到您的 CSS 中，您就完成了!

.navbar-top-right {
    z-index: 1;
}