【发布时间】：2019-11-16 20:12:00
【问题描述】：
我正在为我的网站移动视图创建一个可折叠的导航栏。在移动视图中，我在右侧有一个带有徽标和图标的标题。然后，用户可以单击该图标来访问其他网站链接。
当我注释掉“不显示”时，它确实表明所有其他链接都在徽标和图标下方。我通过 W3C 代码验证器运行了我的 HTML、CSS 和 JavaScript，结果显示“没有显示错误”。我的 html 文件、CSS 文件和 JS 文件似乎都在适当的文件夹中。
HTML：
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8' />
<title>Responsive Design</title>
<link rel='stylesheet' type="text/css" href='styles/styleresponsive.css' />
<script type="text/javascript" src="scripts/responsive.js"></script>
<script src="https://kit.fontawesome.com/01c3568935.js"></script>
</head>
<body>
<!-- There's nothing here! -->
<nav class="navbar">
<span class="navbar-toggle" id="js-navbar-toggle">
<i class="fas fa-bars"></i>
</span>
<a href="#" class="logo"> Logo<!-- <img src='images/stars.jpg' alt="logo" /> --> </a>
<ul class="main-nav" id="js-menu">
<li>
<a href="#" class="nav-links1"><img src='images/stars.jpg' alt="Art" /></a>
</li>
<li>
<a href="#" class="nav-links2"><img src='images/stars.jpg' alt="Code" /></a>
</li>
<li>
<a href="#" class="nav-links3"><img src='images/stars.jpg' alt="Dogs" /></a>
</li>
<li>
<a href="#" class="nav-links4"><img src='images/stars.jpg' alt="Contact" /></a>
</li>
</ul>
</nav>
CSS
/* So, testing for mobile, tablet, and desktop */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Mobile Styles */
@media only screen and (max-width: 400px) {
body{
background-color: #F09A9D; /* Red */
}
/* Here is where that Navigation bar gets tricky */
.navbar {
font-size: 18px;
background-color: #5995DA;
width: 100%;
}
.navbar-toggle {
position: absolute;
top: 10px;
right: 20px;
cursor: pointer;
font-size: 24px;
}
/* Hide the menu so it's not visible by default */
.main-nav {
list-style-type: none; /* Specifies the type of list-item marker */
/* display: none; /* Not displayed */
}
/* Styles the navigation links & logo */
.nav-links1,
.nav-links2,
.nav-links3,
.nav-links4,
.logo {
text-decoration: none;
/* list-style-type: none; /* Removes the default list text underline */
}
/* Styles the list */
.main-nav li {
text-align: center; /* Aligns text center */
margin: 15px auto;
height: 100px;
}
.logo {
display: inline-block;
font-size: 22px;
margin-top: 10px;
margin-left: 20px;
height: 100px;
}
.active {
display: block;
}
JS
/* Now lets make this responsive with JS */
let mainNav = document.getElementById("js-menu");
let navBarToggle = document.getElementById("js-navbar-toggle");
navBarToggle.addEventListener("click", function () {
mainNav.classList.toggle("active");
});
我希望能够单击图标并将其他导航链接“折叠”。相反，这个导航栏似乎停滞不前。
编辑：奇怪的是，当我测试我的原始代码和 codepen 上建议的编辑代码时，它可以工作。当我使用 firefox 和 Safari 开发人员检查器对其进行测试时，它不起作用。在 Safari JavaScript 控制台上，它显示 Stars 图像的“不允许加载本地资源”。这是怎么回事？
编辑二：在没有 stars.jpg 的情况下尝试过。只是让每个链接看起来像
"<li>
<a href="#" class="nav-links1">Art<!--<img src='images/stars.jpg' alt="Art"/> --></a>
</li>"
“测试”它。
在 Safari JavaScript 控制台中，它显示“TypeError: null is not an object (evalating 'navBarToggle.addEventListener')
在 FireFox JavaScript 控制台中，它显示“TypeError: navBarToggle is null”
如果此代码可以在 codepen 上运行，为什么当我尝试从自己的计算机打开文件时它似乎不起作用？
【问题讨论】：
标签： javascript html css flexbox frontend