好吧,我正在尝试在没有任何框架的情况下实现响应式导航。到目前为止,我让它工作了,在点击时显示链接和隐藏它们,但我注意到它不仅仅在实际按钮被点击时切换,而是在导航栏的整个区域切换。
我不确定是在JS中还是在HTML中搞砸了什么。还是在学习事物的开始,不要评判我:D
演示:https://sweetdandelions.github.io/Liberto-photography/
HTML:
<nav>
<div class="burger">
<i class="fas fa-bars" aria-hidden="true"></i>
</div>
<ul class="nav-links tabs">
<li id="tab-1" class="tab-item selected">Portraits</li>
<li id="tab-2" class="tab-item ">Weddings</li>
<li id="tab-3" class="tab-item ">Animals</li>
<li id="tab-4" class="tab-item ">Landscape</li>
<li id="tab-5" class="tab-item ">Blog</li>
<li id="tab-6" class="tab-item ">About</li>
<li id="tab-7" class="tab-item ">Price List</li>
<li id="tab-8" class="tab-item ">Contact</li>
</ul>
</nav>CSS (在媒体查询内,显示.burger :在其外无)
.burger {
display: block;
}
.nav-links {
display: none;
}
.nav-links li {
text-align: center;
padding: 5px;
font-size: 20px;
display: none;
}
.active {
display: block;
}JS:
// Mobile menu nav
const nav = () => {
// Get the menu button
const menu = document.querySelector('.burger');
// Get the nav ul content
const nav = document.querySelector('.nav-links');
// Get all the links from the ul
const links = document.querySelectorAll('.nav-links li');
// Get button to be changed on click - Ignore this for now
const icon = document.querySelector('.fa-bars');
// When menu button clicked
menu.addEventListener('click', () => {
// Display the content in the nav ul
nav.classList.toggle('active');
console.log(nav);
// Show links
links.forEach((link) => {
link.style.display = 'block';
});
});
console.log(menu);
// After link is clicked, close menu
tabItems.forEach(item => item.addEventListener('click', () => {
nav.classList.remove('active');
}));
}
// Call function
nav();发布于 2019-07-10 19:07:46
将menu.addEventListener('click' ...更改为icon.addEventListener('click' ...。
您告诉js监听menu元素上的clicks事件,即您的<div class="burger">,而不是<i class="fas fa-bars" aria-hidden="true"></i>。
https://stackoverflow.com/questions/56969161
复制相似问题