SIdenav 栏下拉菜单

问题描述 投票：0回答：3

我正在开发一个网页，我创建了一个带有下拉菜单的侧栏。但问题是下拉菜单只能通过单击 V 形（向下箭头）打开，我希望它在我们单击完整按钮区域时打开。

侧边栏Codepen

let navli = document.querySelectorAll("div.icon-link");
for (var i = 0; i < navli.length; i++) {
  navli[i].addEventListener("click", (e) => {
    let navliParent = e.target.parentElement.parentElement; //selecting main parent of arrow
    navliParent.classList.toggle("showMenu");
  });
}

我期待侧边栏/js 更新方面的一些帮助，以使下拉菜单正常工作

javascript css sidebar
3个回答
1
投票

问题是您向错误的父级添加了类。使用 closest 方法找到精确的 li 父级 MDN 文档在这里 

 // Sidebar Expand and Tool Tip Features for Whole Div

let navli = document.querySelectorAll("div.icon-link");
for (var i = 0; i < navli.length; i++) {
  navli[i].addEventListener("click", (e) => {
  /* Use closest insead of parent */
    e.target.closest('li').classList.toggle("showMenu");
    // let navliParent = e.target.parentElement.parentElement; //selecting main parent of arrow
    // navliParent.classList.toggle("showMenu");
  });
}


let sidebar = document.querySelector(".sidebar");
let sidebarBtn = document.querySelector(".hamburger");

sidebarBtn.addEventListener("click", () => {
  sidebar.classList.toggle("close");
});


// Hamburger Animation

var $hamburger = $(".hamburger");
$hamburger.on("click", function(e) {
  $hamburger.toggleClass("is-active");
  // Do something else, like open/close menu
});
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap');

body {font-family: 'Poppins', sans-serif;}

/* Sidebar */

.sidebar {

  height: 100%;
  width: 20rem;
  background-color: #0039C6;
  z-index: 100;
  transition: all 0.5s ease;
}

.sidebar.close {
  width: 78px;
}

.sidebar .sidebar-menu {
  height: 60px;
  width: 100%;
  display: flex;
  align-items: center;
  margin-inline-start: 3px;
  /* margin-top: 20px; */
}

.sidebar .nav-links {
  height: 100%;
  padding-inline: 0;
  padding-block-start: 20px;
  padding-block-end: 150px;
  overflow: auto;
}

.sidebar.close .nav-links {
  overflow: visible;
}

.sidebar .nav-links::-webkit-scrollbar {
  display: none;
}

.sidebar .nav-links li i.arrow {
  height: 50px;
  min-width: 60px;
  text-align: center;
  line-height: 50px;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.sidebar .nav-links li {
  position: relative;
  list-style: none;
  transition: all 0.4s ease;
}

.sidebar .nav-links li:hover {
  background-color: var(--ps-sidebarnav-hover);
}

.sidebar .nav-links li .icon-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sidebar.close .nav-links li .icon-link {
  display: block
}

.sidebar .nav-links li i {
  height: 50px;
  min-width: 78px;
  text-align: center;
  line-height: 50px;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.sidebar .nav-links li.showMenu i.arrow {
  transform: rotate(-180deg);
}

.sidebar.close .nav-links i.arrow {
  display: none;
}

.sidebar .nav-links li a {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.sidebar .nav-links li a .link_name {
  font-size: 0.9rem;
  font-weight: 400;
  color: #fff;
  transition: all 0.4s ease;
  white-space: nowrap;
}

.sidebar.close .nav-links li a .link_name {
  opacity: 0;
  pointer-events: none;
}

.sidebar .nav-links li .sub-menu {
  padding-block-start: 6px;
  padding-block-end: 14px;
  padding-inline-start: 80px;
  padding-inline-end: 6px;
  margin-top: -10px;
  background-color: var(--ps-sidebarnav-hover);
  display: none;
}

.sidebar .nav-links li.showMenu .sub-menu {
  display: block;
}

.sidebar .nav-links li .sub-menu a {
  color: #fff;
  font-size: 1em;
  padding: 7px 0;
  white-space: nowrap;
  opacity: 0.6;
  transition: all 0.3s ease;
}

.sidebar .nav-links li .sub-menu a:hover {
  opacity: 1;
}

.sidebar.close .nav-links li .sub-menu {
  position: absolute;
  inset-inline-start: 100%;
  top: -10px;
  margin-top: 0;
  padding: 10px 20px;
  border-radius: 0 6px 6px 0;
  opacity: 0;
  display: block;
  pointer-events: none;
  transition: 0s;
}

.sidebar.close .nav-links li:hover .sub-menu {
  top: 0;
  opacity: 1;
  pointer-events: auto;
  transition: all 0.4s ease;
}

.sidebar .nav-links li .sub-menu .link_name {
  display: none;
}

.sidebar.close .nav-links li .sub-menu .link_name {
  font-size: 18px;
  opacity: 1;
  display: block;
}

.sidebar .nav-links li .sub-menu.blank {
  opacity: 1;
  pointer-events: auto;
  padding-block-start: 3px;
  padding-block-end: 6px;
  padding-inline-start: 16px;
  padding-inline-end: 20px;
  opacity: 0;
  pointer-events: none;
}

.sidebar .nav-links li:hover .sub-menu.blank {
  top: 50%;
  transform: translateY(-50%);
}

.home-section {
  position: relative;
  inset-inline-start: 20rem;
  width: calc(100% - 20rem);
  transition: all 0.5s ease;
}

.home-content {
  padding-block-start: 4rem;

}

header {
  position: fixed;
  inset-inline-start: 20rem;
  width: calc(100% - 20rem);
  transition: all 0.5s ease;
  z-index: 99;
}

.sidebar.close~.home-section header {
  inset-inline-start: 78px;
  width: calc(100% - 78px);
}

.sidebar.close~.home-section {
  inset-inline-start: 78px;
  width: calc(100% - 78px);
}

/* Hamburger Toggle Button */
.hamburger {
  min-width: 48px;
  text-align: center;
  display: inline-block;
  cursor: pointer;
  transition-property: opacity, filter;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  font: inherit;
  color: inherit;
  text-transform: none;
  background-color: transparent;
  border: 0;
  margin: 0;
  overflow: visible;
}

.hamburger:hover {
  opacity: 0.7;
}

.hamburger.is-active:hover {
  opacity: 0.7;
}

.hamburger.is-active .hamburger-inner,
.hamburger.is-active .hamburger-inner::before,
.hamburger.is-active .hamburger-inner::after {
  background-color: #fff;
}

.hamburger-box {
  height: 24px;
  display: inline-block;
  position: relative;
}

.hamburger-inner {
  display: block;
  top: 50%;
  margin-top: -2px;
}

.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
  width: 25px;
  height: 4px;
  background-color: #fff;
  border-radius: 4px;
  position: absolute;
  transition-property: transform;
  transition-duration: 0.15s;
  transition-timing-function: ease;
}

.hamburger-inner::before,
.hamburger-inner::after {
  content: "";
  display: block;
}

.hamburger-inner::before {
  top: -10px;
}

.hamburger-inner::after {
  bottom: -10px;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"/>
 <div class="sidebar open open">
    <div class="sidebar-menu">
      <!-- Hamburger Menu -->
      <button class="hamburger hamburger--spin" type="button" aria-label="Menu" aria-controls="navigation">
        <span class="hamburger-box">
          <span class="hamburger-inner"></span>
        </span>
      </button>
    </div>

    <!-- Side navBar -->
    <ul class="nav-links">
      <li>
        <a href="#">
          <i class="fa-regular fa-grid-horizontal"></i>
          <span class="link_name">Dashboard</span>
        </a>
        <ul class="sub-menu blank">
          <li><a class="link_name" href="#">Dashboard</a></li>
        </ul>
      </li>
      <li>
        <div class="icon-link">
          <a href="#">
            <i class="fa-regular fa-file-contract"></i>
            <span class="link_name">Parnership Applications</span>
          </a>
          <i class="fa fa-chevron-down arrow"></i>
        </div>
        <ul class="sub-menu">
          <li><a class="link_name" href="#">Applications</a></li>
          <li><a href="#">Entities</a></li>
          <li><a href="#">Incomplete</a></li>
          <li><a href="#">All requests</a></li>
        </ul>
      </li>
      <li>
        <div class="icon-link">
          <a href="#">
            <i class="fa-regular fa-files"></i>
            <span class="link_name">My File</span>
          </a>
          <i class="fa fa-chevron-down arrow"></i>
        </div>
        <ul class="sub-menu">
          <li><a class="link_name" href="#">My File</a></li>
          <li><a href="#">My tasks</a></li>
          <li><a href="#">My applications</a></li>
          <li><a href="#">User profile</a></li>
        </ul>
      </li>
      <li>
        <div class="icon-link">
          <a href="#">
            <i class="fa-regular fa-screen-users"></i>
            <span class="link_name">Profile</span>
          </a>
          <i class="fa fa-chevron-down arrow"></i>
        </div>
        <ul class="sub-menu">
          <li><a class="link_name" href="#">Partnership Profile</a></li>
          <li><a href="#">Profiles</a></li>
          <li><a href="#">Notes</a></li>
          <li><a href="#">Procedure</a></li>
        </ul>
      </li>
      <li>
        <a href="#">
          <i class="fa-regular fa-calendar-range"></i>
          <span class="link_name">Agenda</span>
        </a>
        <ul class="sub-menu">
          <li><a class="link_name" href="#">Agenda</a></li>
        </ul>
      </li>
      <li>
        <div class="icon-link">
          <a href="#">
            <i class="fa-regular fa-ballot-check"></i>
            <span class="link_name">Surveys Management</span>
          </a>
          <i class="fa fa-chevron-down arrow"></i>
        </div>
        <ul class="sub-menu">
          <li><a class="link_name" href="#">Management</a></li>
          <li><a href="#">Survey</a></li>
          <li><a href="#">Results</a></li>
        </ul>
      </li>
      <li>
        <a href="#">
          <i class="fa-regular fa-file-chart-pie"></i>
          <span class="link_name">Reports</span>
        </a>
        <ul class="sub-menu blank">
          <li><a class="link_name" href="#">Reports</a></li>
        </ul>
      </li>
      <li>
        <a href="#">
          <i class="fa-regular fa-box-archive"></i>
          <span class="link_name">Archive</span>
        </a>
        <ul class="sub-menu blank">
          <li><a class="link_name" href="#">Archive</a></li>
        </ul>
      </li>
      <li>
        <div class="icon-link">
          <a href="#">
            <i class="fa-regular fa-comment-dots"></i>
            <span class="link_name">Suggestions/Complaints</span>
          </a>
          <i class="fa fa-chevron-down arrow"></i>
        </div>
        <ul class="sub-menu">
          <li><a class="link_name" href="#">Suggestions/Complaints</a></li>
          <li><a href="#">Surveys and complaints</a></li>
          <li><a href="#">Surveys suggestions</a></li>
        </ul>
      </li>
      <li>
        <a href="#">
          <i class="fa-regular fa-messages"></i>
          <span class="link_name">Partners Communication</span>
        </a>
        <ul class="sub-menu blank">
          <li><a class="link_name" href="#">Partners Communication</a></li>
        </ul>
      </li>
    </ul>
  </div>

0
投票

基本上你的问题是，当你点击 div 或箭头时，你会得到不同的目标，因此有不同的父对象。

您可以通过使用事件的 currentTarget 并删除一个 

parentElement
选择器来修复它：

for (var i = 0; i < navli.length; i++) {
  navli[i].addEventListener("click", (e) => {
    let navliParent = e.currentTarget.parentElement; //selecting main parent of arrow
    navliParent.classList.toggle("showMenu");
  });
}
-1
投票

问题是您设置在 之外并且仅单击 。

 let navli = document.querySelectorAll(".icon-link a");
        for (var i = 0; i < navli.length; i++) {
            navli[i].addEventListener("click", (e) => {
                let navliParent = e.target.parentElement.parentElement.parentElement; //selecting main parent of arrow
                navliParent.classList.toggle("showMenu");
            });
        }
        body {
            font-family: 'Poppins', sans-serif;
        }

        /* Sidebar */

        .sidebar {

            height: 100%;
            width: 20rem;
            background-color: #0039C6;
            z-index: 100;
            transition: all 0.5s ease;
        }

        .sidebar.close {
            width: 78px;
        }

        .sidebar .sidebar-menu {
            height: 60px;
            width: 100%;
            display: flex;
            align-items: center;
            margin-inline-start: 3px;
            /* margin-top: 20px; */
        }

        .sidebar .nav-links {
            height: 100%;
            padding-inline: 0;
            padding-block-start: 20px;
            padding-block-end: 150px;
            overflow: auto;
        }

        .sidebar.close .nav-links {
            overflow: visible;
        }

        .sidebar .nav-links::-webkit-scrollbar {
            display: none;
        }

        .sidebar .nav-links li i.arrow {
            height: 50px;
            min-width: 60px;
            text-align: center;
            line-height: 50px;
            color: #fff;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .sidebar .nav-links li {
            position: relative;
            list-style: none;
            transition: all 0.4s ease;
        }

        .sidebar .nav-links li:hover {
            background-color: var(--ps-sidebarnav-hover);
        }

        .sidebar .nav-links li .icon-link {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .sidebar.close .nav-links li .icon-link {
            display: block
        }

        .sidebar .nav-links li i {
            height: 50px;
            min-width: 78px;
            text-align: center;
            line-height: 50px;
            color: #fff;
            font-size: 20px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .sidebar .nav-links li.showMenu i.arrow {
            transform: rotate(-180deg);
        }

        .sidebar.close .nav-links i.arrow {
            display: none;
        }

        .sidebar .nav-links li a {
            display: flex;
            align-items: center;
            text-decoration: none;
            width: 100%;
        }

        .sidebar .nav-links li a .link_name {
            font-size: 0.9rem;
            font-weight: 400;
            color: #fff;
            transition: all 0.4s ease;
            white-space: nowrap;
            flex: 1;

        }

        .sidebar.close .nav-links li a .link_name {
            opacity: 0;
            pointer-events: none;
        }

        .sidebar .nav-links li .sub-menu {
            padding-block-start: 6px;
            padding-block-end: 14px;
            padding-inline-start: 80px;
            padding-inline-end: 6px;
            margin-top: -10px;
            background-color: var(--ps-sidebarnav-hover);
            display: none;
        }

        .sidebar .nav-links li.showMenu .sub-menu {
            display: block;
        }

        .sidebar .nav-links li .sub-menu a {
            color: #fff;
            font-size: 1em;
            padding: 7px 0;
            white-space: nowrap;
            opacity: 0.6;
            transition: all 0.3s ease;
        }

        .sidebar .nav-links li .sub-menu a:hover {
            opacity: 1;
        }

        .sidebar.close .nav-links li .sub-menu {
            position: absolute;
            inset-inline-start: 100%;
            top: -10px;
            margin-top: 0;
            padding: 10px 20px;
            border-radius: 0 6px 6px 0;
            opacity: 0;
            display: block;
            pointer-events: none;
            transition: 0s;
        }

        .sidebar.close .nav-links li:hover .sub-menu {
            top: 0;
            opacity: 1;
            pointer-events: auto;
            transition: all 0.4s ease;
        }

        .sidebar .nav-links li .sub-menu .link_name {
            display: none;
        }

        .sidebar.close .nav-links li .sub-menu .link_name {
            font-size: 18px;
            opacity: 1;
            display: block;
        }

        .sidebar .nav-links li .sub-menu.blank {
            opacity: 1;
            pointer-events: auto;
            padding-block-start: 3px;
            padding-block-end: 6px;
            padding-inline-start: 16px;
            padding-inline-end: 20px;
            opacity: 0;
            pointer-events: none;
        }

        .sidebar .nav-links li:hover .sub-menu.blank {
            top: 50%;
            transform: translateY(-50%);
        }

        .home-section {
            position: relative;
            inset-inline-start: 20rem;
            width: calc(100% - 20rem);
            transition: all 0.5s ease;
        }

        .home-content {
            padding-block-start: 4rem;

        }

        header {
            position: fixed;
            inset-inline-start: 20rem;
            width: calc(100% - 20rem);
            transition: all 0.5s ease;
            z-index: 99;
        }

        .sidebar.close~.home-section header {
            inset-inline-start: 78px;
            width: calc(100% - 78px);
        }

        .sidebar.close~.home-section {
            inset-inline-start: 78px;
            width: calc(100% - 78px);
        }

        /* Hamburger Toggle Button */
        .hamburger {
            min-width: 48px;
            text-align: center;
            display: inline-block;
            cursor: pointer;
            transition-property: opacity, filter;
            transition-duration: 0.15s;
            transition-timing-function: linear;
            font: inherit;
            color: inherit;
            text-transform: none;
            background-color: transparent;
            border: 0;
            margin: 0;
            overflow: visible;
        }

        .hamburger:hover {
            opacity: 0.7;
        }

        .hamburger.is-active:hover {
            opacity: 0.7;
        }

        .hamburger.is-active .hamburger-inner,
        .hamburger.is-active .hamburger-inner::before,
        .hamburger.is-active .hamburger-inner::after {
            background-color: #fff;
        }

        .hamburger-box {
            height: 24px;
            display: inline-block;
            position: relative;
        }

        .hamburger-inner {
            display: block;
            top: 50%;
            margin-top: -2px;
        }

        .hamburger-inner,
        .hamburger-inner::before,
        .hamburger-inner::after {
            width: 25px;
            height: 4px;
            background-color: #fff;
            border-radius: 4px;
            position: absolute;
            transition-property: transform;
            transition-duration: 0.15s;
            transition-timing-function: ease;
        }

        .hamburger-inner::before,
        .hamburger-inner::after {
            content: "";
            display: block;
        }

        .hamburger-inner::before {
            top: -10px;
        }

        .hamburger-inner::after {
            bottom: -10px;
        }
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css" />
<div class="sidebar open open">
        <div class="sidebar-menu">
            <!-- Hamburger Menu -->
            <button class="hamburger hamburger--spin" type="button" aria-label="Menu" aria-controls="navigation">
                <span class="hamburger-box">
                    <span class="hamburger-inner"></span>
                </span>
            </button>
        </div>

        <!-- Side navBar -->
        <ul class="nav-links">
            <li>
                <a href="#">
                    <i class="fa-regular fa-grid-horizontal"></i>
                    <span class="link_name">Dashboard</span>
                </a>
                <ul class="sub-menu blank">
                    <li><a class="link_name" href="#">Dashboard</a></li>
                </ul>
            </li>
            <li>
                <div class="icon-link">
                    <a href="#">
                        <i class="fa-regular fa-file-contract"></i>
                        <span class="link_name">Parnership Applications</span>
                        <i class="fa fa-chevron-down arrow"></i>
                    </a>

                </div>
                <ul class="sub-menu">
                    <li><a class="link_name" href="#">Applications</a></li>
                    <li><a href="#">Entities</a></li>
                    <li><a href="#">Incomplete</a></li>
                    <li><a href="#">All requests</a></li>
                </ul>
            </li>
            <li>
                <div class="icon-link">
                    <a href="#">
                        <i class="fa-regular fa-files"></i>
                        <span class="link_name">My File</span>
                        <i class="fa fa-chevron-down arrow"></i>
                    </a>

                </div>
                <ul class="sub-menu">
                    <li><a class="link_name" href="#">My File</a></li>
                    <li><a href="#">My tasks</a></li>
                    <li><a href="#">My applications</a></li>
                    <li><a href="#">User profile</a></li>
                </ul>
            </li>
            <li>
                <div class="icon-link">
                    <a href="#">
                        <i class="fa-regular fa-screen-users"></i>
                        <span class="link_name">Profile</span>
                        <i class="fa fa-chevron-down arrow"></i>
                    </a>

                </div>
                <ul class="sub-menu">
                    <li><a class="link_name" href="#">Partnership Profile</a></li>
                    <li><a href="#">Profiles</a></li>
                    <li><a href="#">Notes</a></li>
                    <li><a href="#">Procedure</a></li>
                </ul>
            </li>
            <li>
                <a href="#">
                    <i class="fa-regular fa-calendar-range"></i>
                    <span class="link_name">Agenda</span>
                </a>
                <ul class="sub-menu">
                    <li><a class="link_name" href="#">Agenda</a></li>
                </ul>
            </li>
            <li>
                <div class="icon-link">
                    <a href="#">
                        <i class="fa-regular fa-ballot-check"></i>
                        <span class="link_name">Surveys Management</span>
                        <i class="fa fa-chevron-down arrow"></i>
                    </a>

                </div>
                <ul class="sub-menu">
                    <li><a class="link_name" href="#">Management</a></li>
                    <li><a href="#">Survey</a></li>
                    <li><a href="#">Results</a></li>
                </ul>
            </li>
            <li>
                <a href="#">
                    <i class="fa-regular fa-file-chart-pie"></i>
                    <span class="link_name">Reports</span>
                </a>
                <ul class="sub-menu blank">
                    <li><a class="link_name" href="#">Reports</a></li>
                </ul>
            </li>
            <li>
                <a href="#">
                    <i class="fa-regular fa-box-archive"></i>
                    <span class="link_name">Archive</span>
                </a>
                <ul class="sub-menu blank">
                    <li><a class="link_name" href="#">Archive</a></li>
                </ul>
            </li>
            <li>
                <div class="icon-link">
                    <a href="#">
                        <i class="fa-regular fa-comment-dots"></i>
                        <span class="link_name">Suggestions/Complaints</span>
                        <i class="fa fa-chevron-down arrow"></i>
                    </a>

                </div>
                <ul class="sub-menu">
                    <li><a class="link_name" href="#">Suggestions/Complaints</a></li>
                    <li><a href="#">Surveys and complaints</a></li>
                    <li><a href="#">Surveys suggestions</a></li>
                </ul>
            </li>
            <li>
                <a href="#">
                    <i class="fa-regular fa-messages"></i>
                    <span class="link_name">Partners Communication</span>
                </a>
                <ul class="sub-menu blank">
                    <li><a class="link_name" href="#">Partners Communication</a></li>
                </ul>
            </li>
        </ul>
    </div>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.