如何将我的导航栏链接变成带有 HTML CSS 和 JavaScript 的下拉菜单？

Question

我正在尝试将导航栏的前两个 link 变成下拉菜单。我想做的是当你点击它们时，下拉菜单会显示，箭头图标从向下的箭头变成向上的箭头。

我曾尝试使用 JavaScript 来执行 OnClick 事件，但没有成功。

同样出于某种原因，我的两个下拉菜单彼此重叠，并且它们未位于正确的导航栏 link 下。一个应该出现在导航栏中的功能 link 下，另一个应该出现在公司 link 下。我还想请求有关如何解决此问题的帮助。

/* When the user clicks on the button,
    toggle between hiding and showing the dropdown content */
function myFunction() {
  document.getElementById("dropdown").classList.toggle("show");
}

// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropdown-arrow')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

@import url('https://fonts.googleapis.com/css2?family=Epilogue:wght@500;700&display=swap');
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: 'Epilogue', 'sans-serif';
}

.body-container {
  background-color: hsl(0, 0%, 98%);
  height: 100vh;
  width: 100vw;
  max-width: 100%;
}

.navbar {
  display: flex;
  align-items: center;
}

.navbar-flex li {
  margin-right: auto;
  display: inline-block;
  padding: 1em;
}

.navbar-flex a {
  color: hsl(0, 0%, 41%);
  text-decoration: none;
}

.navbar-flex a:hover {
  color: hsl(0, 0%, 8%);
}

.navbar li {
  list-style-type: none;
}

.navbar img {
  padding: 1.5em 1em 1em 2em;
}

.navbar-btn {
  margin-left: auto;
  padding: 1.5em;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  /*display: none;*/
  position: absolute;
  min-height: 100px;
  box-shadow: 0px 8px 16px 0px hsla(0, 0%, 0%, 0.2);
  z-index: 1;
}

.dropdown-content a {
  color: hsl(0, 0%, 8%);
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}


/* Change color of dropdown links on hover */

.dropdown-content a:hover {
  background-color: hsl(0, 0%, 41%);
}

.dropdown-arrow {
  color: hsl(0, 0%, 41%);
  outline: none;
  background: none;
  border: none;
  cursor: pointer;
}

.dropdown-arrow:hover {
  color: hsl(0, 0%, 8%);
}

.dropdown-links {
  text-decoration: none;
  display: block;
  padding: 1em;
  color: hsl(0, 0%, 8%);
}

.dropdown-links:hover {
  background-color: hsl(0, 0%, 98%);
}

.show {
  display: block;
}


/* Styles for both buttons in the navbar */

.btn-primary {
  color: hsl(0, 0%, 41%);
  outline: none;
  padding: 0.5em;
  margin-left: 1em;
  cursor: pointer;
}

.btn-primary:hover {
  color: hsl(0, 0%, 8%);
}


/* Styles for login button in the navbar */

#login-btn {
  border: none;
  background: none;
}


/* Styles for register button in the navbar */

#register-btn {
  padding: 0.8em;
  border-radius: 10px;
  background: none;
  border-color: hsl(0, 0%, 41%);
  border-width: 1px;
}

.register-btn:hover {
  border-color: hsl(0, 0%, 8%);
}

<div class="body-container">
  <nav class="navbar">
    <a href="#"><img src="images/logo.svg" alt="company logo"></a>
    <ul class="navbar-flex">

      <li><a href="#">Features </a>
        <!-- Features dropdown menu-->
        <div class="dropdown">
          <button onclick="myFunction()" class="dropdown-arrow">
            <svg class = "drop-image" svg width="10" height="6" xmlns="http://www.w3.org/2000/svg"><path stroke="#686868" stroke-width="1.5" fill="none" d="m1 1 4 4 4-4"/></svg>
          </button>
          <ul class="dropdown-content">
            <li><a class="dropdown-links" href="#">Todo List</a></li>
            <li><a class="dropdown-links" href="#">Calendars</a></li>
            <li><a class="dropdown-links" href="#">Reminders</a></li>
            <li><a class="dropdown-links" href="#">Planning</a></li>
          </ul>
        </div>
      </li>

      <li><a href="#">Company </a>
        <!-- Company dropdown menu-->
        <div class="dropdown">
          <button onclick="myFunction()" class="dropdown-arrow">
            <svg class = "drop-image" width="10" height="6" xmlns="http://www.w3.org/2000/svg"><path stroke="#686868" stroke-width="1.5" fill="none" d="m1 1 4 4 4-4"/></svg>
          </button>
          <ul id="my-dropdown" class="dropdown-content">
            <li><a class="dropdown-links" href="#">History</a></li>
            <li><a class="dropdown-links" href="#">Our Team</a></li>
            <li><a class="dropdown-links" href="#">Blog</a></li>
          </ul>
        </div>
      </li>

      <li><a href="#">Careers</a></li>
      <li><a href="#">About</a></li>
    </ul>

    <div class="navbar-btn">
      <button class="btn-primary" id="login-btn">Login</button>
      <button class="btn-primary" id="register-btn">Register</button>
    </div>
  </nav>

</div>

</div>
</div>

Answer 1

我给你写了一个可能的 Vanilla JS 方法来处理你正在寻找的行为：

首先 select 列表中的所有 li 个元素；
添加一个click事件侦听器；
每次单击它都会添加或删除显示模态的类并根据我附加到 DOM 节点的属性旋转箭头，isOpen, 所以你总能知道某个元素是在视觉上打开还是关闭。如果您计划在打开新下拉菜单时关闭其他打开的下拉菜单以防止重叠，这将非常有用。

const links = document.querySelectorAll(".navbar-flex>li")
links.forEach((el, i) => {
  el.isOpen = false;
  el.onclick = e => {
    const dropdown = el.querySelector(".dropdown")
    const arrow = el.querySelector(".dropdown-arrow")
    el.isOpen ? close(dropdown,
      arrow) : open(dropdown,
      arrow)
    el.isOpen = !el.isOpen
    //Close other open dropdowns
    links.forEach((el, j) => {
      const dropdown = el.querySelector(".dropdown")
      const arrow = el.querySelector(".dropdown-arrow")
      if (i !== j) {
        if (el.isOpen) {
          close(dropdown, arrow)
          el.isOpen = false
        }
      }
    })
  }

})


function open(el, arrow) {
  el.classList.add("show")
  arrow.classList.add("rotate")
}

function close(el, arrow) {
  el.classList.remove("show")
  arrow.classList.remove("rotate")
}

@import url('https://fonts.googleapis.com/css2?family=Epilogue:wght@500;700&display=swap');
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: 'Epilogue', 'sans-serif';
}

.body-container {
  background-color: hsl(0, 0%, 98%);
  height: 100vh;
  width: 100vw;
  max-width: 100%;
}

.navbar {
  display: flex;
  align-items: center;
}

.navbar-flex li {
  margin-right: auto;
  display: inline-block;
  padding: 1em;
}

.navbar-flex a {
  color: hsl(0, 0%, 41%);
  text-decoration: none;
}

.navbar-flex a:hover {
  color: hsl(0, 0%, 8%);
}

.navbar li {
  list-style-type: none;
}

.navbar img {
  padding: 1.5em 1em 1em 2em;
}

.navbar-btn {
  margin-left: auto;
  padding: 1.5em;
}

.dropdown {
  position: absolute;
  display: none;
  background: #FFF;
}

.dropdown-content {
  min-height: 100px;
  box-shadow: 0px 8px 16px 0px hsla(0, 0%, 0%, 0.2);
  z-index: 1;
  display: flex;
  flex-direction: column;
}

.dropdown-content a {
  color: hsl(0, 0%, 8%);
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}


/* Change color of dropdown links on hover */

.dropdown-content a:hover {
  background-color: hsl(0, 0%, 41%);
}

.dropdown-arrow {
  color: hsl(0, 0%, 41%);
  outline: none;
  background: none;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease-out;
}

.dropdown-arrow:hover {
  color: hsl(0, 0%, 8%);
}

.dropdown-links {
  text-decoration: none;
  display: block;
  padding: 1em;
  color: hsl(0, 0%, 8%);
}

.dropdown-links:hover {
  background-color: hsl(0, 0%, 98%);
}

.show {
  display: block !important;
}

.rotate {
  transform: rotate(180deg);
}


/* Styles for both buttons in the navbar */

.btn-primary {
  color: hsl(0, 0%, 41%);
  outline: none;
  padding: 0.5em;
  margin-left: 1em;
  cursor: pointer;
}

.btn-primary:hover {
  color: hsl(0, 0%, 8%);
}


/* Styles for login button in the navbar */

#login-btn {
  border: none;
  background: none;
}


/* Styles for register button in the navbar */

#register-btn {
  padding: 0.8em;
  border-radius: 10px;
  background: none;
  border-color: hsl(0, 0%, 41%);
  border-width: 1px;
}

.register-btn:hover {
  border-color: hsl(0, 0%, 8%);
}

<div class="body-container">
  <nav class="navbar">
    <a href="#"><img src="images/logo.svg" alt="company logo"></a>
    <ul class="navbar-flex">

      <li>
        <a href="#">Features </a>
        <button class="dropdown-arrow">
            <svg class = "drop-image" svg width="10" height="6" xmlns="http://www.w3.org/2000/svg"><path stroke="#686868" stroke-width="1.5" fill="none" d="m1 1 4 4 4-4"/></svg>
          </button>
        <!-- Features dropdown menu-->
        <div class="dropdown">

          <ul class="dropdown-content">
            <li><a class="dropdown-links" href="#">Todo List</a></li>
            <li><a class="dropdown-links" href="#">Calendars</a></li>
            <li><a class="dropdown-links" href="#">Reminders</a></li>
            <li><a class="dropdown-links" href="#">Planning</a></li>
          </ul>
        </div>
      </li>

      <li>
        <a href="#">Company </a>
        <button class="dropdown-arrow">
            <svg class = "drop-image" width="10" height="6" xmlns="http://www.w3.org/2000/svg"><path stroke="#686868" stroke-width="1.5" fill="none" d="m1 1 4 4 4-4"/></svg>
          </button>
        <!-- Company dropdown menu-->
        <div class="dropdown">
          <ul id="my-dropdown" class="dropdown-content">
            <li><a class="dropdown-links" href="#">History</a></li>
            <li><a class="dropdown-links" href="#">Our Team</a></li>
            <li><a class="dropdown-links" href="#">Blog</a></li>
          </ul>
        </div>
      </li>

      <li><a href="#">Careers</a></li>
      <li><a href="#">About</a></li>
    </ul>

    <div class="navbar-btn">
      <button class="btn-primary" id="login-btn">Login</button>
      <button class="btn-primary" id="register-btn">Register</button>
    </div>
  </nav>

</div>

</div>
</div>

如何将我的导航栏链接变成带有 HTML CSS 和 JavaScript 的下拉菜单？

How can I turn my navbar links into a dropdown menu with HTML CSS and JavaScript?

html

javascript

css

onclick