网站响应式导航栏中的问题
problem in responsive nav-bar for website
我已经为导航栏编写了这个脚本,它应该充当切换按钮。第一次点击,它应该打开菜单,第二次点击它应该关闭。
我无法理解这个问题。
脚本:
const navSlide = () => {
const togg = document.querySelector('.toggle');
const navs = document.querySelector('nav-links');
togg.addEventListener('click', () => {
navs.classList.toggle('nav_ul_active');
});
}
相关Html代码:
<div class="toggle" onclick="navSlide()">
<div class="menu"> <i class="fa fa-bars" aria-hidden="true"></i> </div>
</div>
<div class="nav-links">
<ul class="nav_ul">
<li><a href="#head-proj">Projects</a></li>
<li><a href="#head-about">About</a></li>
</ul>
</div>
现在,当我刷新我的网站并单击按钮时,会显示此错误:
Uncaught TypeError: Cannot read property 'classList' of null
at HTMLDivElement. (app.js:6)
这里 app.js 是我的 javascript 文件。这是什么错误,我应该如何清除它?
querySelector()
需要一个 CSS 选择器字符串。使用点表示 class 名称:
document.querySelector('.nav-links')
此外,您正在绑定一个点击处理程序,该点击处理程序绑定另一个点击处理程序。结果是每次单击该元素时都会将一个新的处理程序绑定到该元素。我建议删除内联 onclick
属性并依赖 addEventListener
.
const togg = document.querySelector('.toggle');
const navs = document.querySelector('.nav-links');
togg.addEventListener('click', () => {
navs.classList.toggle('nav_ul_active');
});
.nav_ul_active {
background-color: red;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="toggle">
<div class="menu"><i class="fa fa-bars" aria-hidden="true"></i></div>
</div>
<div class="nav-links">
<ul class="nav_ul">
<li><a href="#head-proj">Projects</a></li>
<li><a href="#head-about">About</a></li>
</ul>
</div>
我已经为导航栏编写了这个脚本,它应该充当切换按钮。第一次点击,它应该打开菜单,第二次点击它应该关闭。
我无法理解这个问题。
脚本:
const navSlide = () => {
const togg = document.querySelector('.toggle');
const navs = document.querySelector('nav-links');
togg.addEventListener('click', () => {
navs.classList.toggle('nav_ul_active');
});
}
相关Html代码:
<div class="toggle" onclick="navSlide()">
<div class="menu"> <i class="fa fa-bars" aria-hidden="true"></i> </div>
</div>
<div class="nav-links">
<ul class="nav_ul">
<li><a href="#head-proj">Projects</a></li>
<li><a href="#head-about">About</a></li>
</ul>
</div>
现在,当我刷新我的网站并单击按钮时,会显示此错误:
Uncaught TypeError: Cannot read property 'classList' of null at HTMLDivElement. (app.js:6)
这里 app.js 是我的 javascript 文件。这是什么错误,我应该如何清除它?
querySelector()
需要一个 CSS 选择器字符串。使用点表示 class 名称:
document.querySelector('.nav-links')
此外,您正在绑定一个点击处理程序,该点击处理程序绑定另一个点击处理程序。结果是每次单击该元素时都会将一个新的处理程序绑定到该元素。我建议删除内联 onclick
属性并依赖 addEventListener
.
const togg = document.querySelector('.toggle');
const navs = document.querySelector('.nav-links');
togg.addEventListener('click', () => {
navs.classList.toggle('nav_ul_active');
});
.nav_ul_active {
background-color: red;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="toggle">
<div class="menu"><i class="fa fa-bars" aria-hidden="true"></i></div>
</div>
<div class="nav-links">
<ul class="nav_ul">
<li><a href="#head-proj">Projects</a></li>
<li><a href="#head-about">About</a></li>
</ul>
</div>