我正在尝试使用具有多个“断点”的 html/css/vanilla JS 编写响应式导航栏，这意味着在 815px 及以下我希望有一个部分导航可见的下拉菜单...然后在 600px 和下面我希望整个导航(除了主页链接)都在下拉列表中。
我有点让它使用 2 个 javascript 函数和 RWD 媒体查询工作，但在使用 onclick 函数后，这些类不会“重置”到它们的默认状态。我知道这是因为 DOM 已经加载了 CSS，现在 onclick 函数正在改变它们的 css 规则。
那么，在使用这些功能后，如何让导航返回到在窗口调整大小时正确显示所有内容？现在，如果您缩小到任一断点并使用 onclick 函数，一旦您将浏览器调整为平板电脑/桌面 View ，它将不再显示导航链接。
JS fiddle :https://jsfiddle.net/8x32qr14/13/
谢谢!
var navOne = document.getElementsByClassName('navOne');
function displayNavOne() {
for (i = 0; i < navOne.length; i++) {
if (navOne[i].style.display === 'none' || navOne[i].style.display === '') {
navOne[i].style.display = 'block';
navOne[i].style.float = 'none';
navOne[i].style.clear = 'both';
} else {
navOne[i].style.display = 'none';
navOne[i].style.float = 'left';
navOne[i].style.clear = 'none';
}
}
}
var navTwo = document.getElementsByClassName('navTwo');
function displayNavTwo() {
for (a = 0; a < navTwo.length; a++) {
if (navTwo[a].style.display === 'none' || navTwo[a].style.display === '') {
navTwo[a].style.display = 'block';
navTwo[a].style.float = 'none';
navTwo[a].style.clear = 'both';
} else {
navTwo[a].style.display = 'none';
navTwo[a].style.float = 'left';
navTwo[a].style.clear = 'none';
}
}
}/* font-family: 'Quicksand', sans-serif; */
body {
background-color: gainsboro;
}
nav ul {
list-style-type: none;
background-color: palevioletred;
overflow: hidden;
border-bottom: 0.3em solid white;
}
nav ul li {
float: left;
}
nav ul li a {
display: block;
text-decoration: none;
padding: 1em 2em;
color: white;
transition: 0.3s all ease;
font-family: 'Quicksand', sans-serif;
}
nav ul li a:hover {
background-color: whitesmoke;
color: palevioletred;
}
.active {
background-color: white;
color: palevioletred;
}
.nav-container {
margin: auto;
}
#bars,
#bars2 {
float: right;
color: white;
font-size: 1.5em;
padding: 0.4em 1em;
display: none;
}
#bars:hover,
#bars2:hover {
cursor: pointer;
}
@media only screen and (min-width: 1200px) {
.nav-container {
width: 75vw;
}
}
@media only screen and (max-width: 815px) {
.nav-container li:nth-child(5),
.nav-container li:nth-child(6),
.nav-container li:nth-child(7) {
display: none;
}
#bars {
display: block;
}
}
@media only screen and (max-width: 600px) {
.nav-container li:nth-child(2),
.nav-container li:nth-child(3),
.nav-container li:nth-child(4),
.nav-container li:nth-child(5),
.nav-container li:nth-child(6),
.nav-container li:nth-child(7) {
display: none;
}
#bars {
display: none;
}
#bars2 {
display: block;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://kit.fontawesome.com/4bfc31d982.js"></script>
<link href="https://fonts.googleapis.com/css?family=Quicksand&display=swap" rel="stylesheet">
<link rel="stylesheet" href="../css/reset.css" type="text/css">
<link rel="stylesheet" href="../css/master.css" type="text/css">
</head>
<body>
<header>
<nav>
<ul id="main-nav">
<div class="nav-container">
<li><a class="active" href="#">Home</a></li>
<li class="navTwo"><a href="#">Link 2</a></li>
<li class="navTwo"><a href="#">Link 3</a></li>
<li class="navTwo"><a href="#">Link 4</a></li>
<li class="navOne navTwo"><a href="#">Link 5</a></li>
<li class="navOne navTwo"><a href="#">Link 6</a></li>
<li class="navOne navTwo"><a href="#">Link 7</a></li>
<li onclick="displayNavOne()" id="bars"><i class="fas fa-bars"></i></li>
<li onclick="displayNavTwo()" id="bars2"><i class="fas fa-bars"></i></li>
</div>
</ul>
</nav>
</header>
</body>
</html>最佳答案
尝试使用 window.matchMedia 函数。 例如 window.matchMedia(“(min-width:600px)”)。 如果窗口宽度与媒体查询宽度匹配，则相应地添加事件类。 在我的 GitHub 上有一个这样的例子，它使用一个链接，该链接在屏幕 <600px 的导航菜单中可见(因此您必须单击汉堡包才能看到它)，并且在屏幕的主导航( Logo 旁边)上可见大于 600px。
https://github.com/Hy-M/plants-project
希望对您有所帮助。
关于javascript - 使用javascript切换功能后，如何使导航链接在浏览器调整大小时重新出现/重置为默认值？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56641984/