我怎么能把我的导航栏链接变成一个下拉菜单与HTML CSS和JavaScript?

Question

我想把导航栏的前两个链接变成下拉菜单。我想这样，当你点击它们时，下拉菜单显示，箭头图标从一个向下指向的箭头变成一个向上指向的箭头。

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

由于某些原因，我的两个下拉菜单相互重叠，它们没有位于正确的导航栏链接下。一个应该是一个出现在功能链接下，另一个出现在导航栏的公司链接下。我也想请求帮助如何解决这个问题。

/* 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

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

1. 首先选择列表中所有的li元素;
2. 添加click事件监听器;
3. 每次点击它添加或删除显示模态和旋转箭头的类，基于我附加到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>