javascript - 未捕获的 TypeError 无法读取 null 的属性“类列表”
问题描述
我一直在阅读这个问题的其他可能重复,但我仍然找不到完成此问题所需的解决方案。所以,我下载了一个包含所有宽度的汉堡包的 CSS 文件,但是它们的类名与 Bootstrap 的导航类冲突,所以我更改了 SCSS 文件和 CSS 以使其工作,然后还更改了 .js 文件中的名称以避免错误。
但是,似乎错误仍然存在并且不会消失。这一次,菜单列表隐藏在汉堡包中,但汉堡包不起作用。这是所有受影响的东西的代码。
(function() {
var hamburger = {
naviToggle: document.querySelector('.navi-toggle'),
navi: document.querySelector('navi'),
doToggle: function(e) {
e.preventDefault();
this.naviToggle.classList.toggle('expanded');
this.navi.classList.toggle('expanded');
}
};
hamburger.naviToggle.addEventListener('click', function(e) { hamburger.doToggle(e); });
}());
@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro");
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
-ms-text-size-adjust: 100%; }
*:focus {
outline: none; }
html {
background: #5634d1;
color: white;
font: normal 10px/1.42857 "Source Sans Pro", Helvetica, Arial, sans-serif; }
body {
background: none;
color: inherit;
font: inherit; }
a {
color: inherit;
cursor: pointer;
text-decoration: none; }
a:hover {
opacity: 0.8; }
/* nav toggle */
.navi-toggle {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
cursor: pointer;
height: 2rem;
left: 2rem;
position: fixed;
top: 2rem;
width: 3.6rem;
z-index: 2; }
.navi-toggle:hover {
opacity: 0.8; }
.navi-toggle .navi-toggle-bar,
.navi-toggle .navi-toggle-bar::after,
.navi-toggle .navi-toggle-bar::before {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
background: white;
content: '';
height: 0.4rem;
width: 100%; }
.navi-toggle .navi-toggle-bar {
margin-top: 0; }
.navi-toggle .navi-toggle-bar::after {
margin-top: 0.8rem; }
.navi-toggle .navi-toggle-bar::before {
margin-top: -0.8rem; }
.navi-toggle.expanded .navi-toggle-bar {
background: transparent; }
.navi-toggle.expanded .navi-toggle-bar::after, .navi-toggle.expanded .navi-toggle-bar::before {
background: white;
margin-top: 0; }
.navi-toggle.expanded .navi-toggle-bar::after {
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg); }
.navi-toggle.expanded .navi-toggle-bar::before {
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg); }
/* nav */
.navi {
-webkit-transition: left 0.5s ease;
-moz-transition: left 0.5s ease;
-ms-transition: left 0.5s ease;
-o-transition: left 0.5s ease;
transition: left 0.5s ease;
background: #28dde0;
color: white;
cursor: pointer;
font-size: 2rem;
height: 100vh;
right: -30rem;
padding: 6rem 2rem 2rem 2rem;
position: fixed;
top: 0;
width: 20rem;
z-index: 1; }
.navi.expanded {
left: 0; }
.navi ul {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
list-style: none;
margin: 0;
padding: 0; }
/*# sourceMappingURL=nav.css.map */
/* NAVIGATION MENU */
div#main-menu {
width: 100%;
margin: auto;
text-align: center;
}
.btn-link {
font-weight: 400;
color: #007bff;
background-color: transparent;
font-size: 1.5rem;
color: #fff;
padding: 0;
}
ul.dropdown-list-item {
padding: 0;
}
ul.dropdown-list-item li {
list-style: none;
padding: 0;
line-height: 100%;
}
ul.dropdown-list-item li a {
font-size: 1rem;
}
.btn-link:hover{
color: #fff;
}
/*** NAVIGATION ICONS ***/
button.user-icon {
background-color: transparent;
border: none;
}
.nav-icons {
position: absolute;
right: 13%;
top: 23%;
}
/*** END NAVIGATION ICONS ***/
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navi">
<div id="main-menu">
<div class="main-menu-list">
<div class="main-menu-header" id="main-menu-one">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#dropdown-list-one" aria-expanded="true" aria-controls="main-menu">Mens</button>
</h5>
</div>
<div id="dropdown-list-one" class="collapse" aria-labelledby="main-menu-one" data-parent="#main-menu">
<div class="dropdown-list-body">
<ul class="dropdown-list-item">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
</div>
</div>
</div>
<div class="main-menu-list">
<div class="main-menu-header" id="main-menu-one">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#dropdown-list-two" aria-expanded="true" aria-controls="main-menu">Womens</button>
</h5>
</div>
<div id="dropdown-list-two" class="collapse" aria-labelledby="main-menu-one" data-parent="#main-menu">
<div class="dropdown-list-body">
<ul class="dropdown-list-item">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
</div>
</div>
</div>
<div class="main-menu-list">
<div class="main-menu-header" id="main-menu-one">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#dropdown-list-three" aria-expanded="true" aria-controls="main-menu">Accessories</button>
</h5>
</div>
<div id="dropdown-list-three" class="collapse" aria-labelledby="main-menu-one" data-parent="#main-menu">
<div class="dropdown-list-body">
<ul class="dropdown-list-item">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
</div>
</div>
</div>
<div class="main-menu-list">
<div class="main-menu-header" id="main-menu-one">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#dropdown-list-four" aria-expanded="true" aria-controls="main-menu">Equipments</button>
</h5>
</div>
<div id="dropdown-list-four" class="collapse" aria-labelledby="main-menu-one" data-parent="#main-menu">
<div class="dropdown-list-body">
<ul class="dropdown-list-item">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
</div>
</div>
<div class="main-menu-list">
<div class="main-menu-header" id="main-menu-one">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#dropdown-list-five" aria-expanded="true" aria-controls="main-menu">More</button>
</h5>
</div>
<div id="dropdown-list-five" class="collapse" aria-labelledby="main-menu-one" data-parent="#main-menu">
<div class="dropdown-list-body">
<ul class="dropdown-list-item">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</nav>
<nav class="navbar navbar-expand-lg navbar-default fixed-top" id="nav">
<div class="container">
<div class="navi-toggle">
<div class="navi-toggle-bar"></div>
</div>
<a class="navbar-brand" href="index.php"><img src="img/logo.png"></a>
</div>
<div class="container nav-icons">
<button type="button" class="iconton">
<img src="img/cart-product-white.png" alt="">
</button>
<button type="button" class="iconton" data-toggle="modal" data-target="#userSearch" id="icon-search">
<img src="img/navbar-icon.png">
</button>
<button type="button" class="iconton" data-toggle="modal" data-target="#userSign" id="icon-user">
<img src="img/user.png">
</button>
</div>
<div class="container">
</div>
</nav>
如果有人能解决这个问题,那就太好了!谢谢!
解决方案
navi: document.querySelector('navi')
应该
navi: document.querySelector('.navi')
因为它是一个类。
(function() {
var hamburger = {
naviToggle: document.querySelector('.navi-toggle'),
navi: document.querySelector('.navi'),
doToggle: function(e) {
e.preventDefault();
this.naviToggle.classList.toggle('expanded');
this.navi.classList.toggle('expanded');
}
};
hamburger.naviToggle.addEventListener('click', function(e) { hamburger.doToggle(e); });
}());
@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro");
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
-ms-text-size-adjust: 100%; }
*:focus {
outline: none; }
html {
background: #5634d1;
color: white;
font: normal 10px/1.42857 "Source Sans Pro", Helvetica, Arial, sans-serif; }
body {
background: none;
color: inherit;
font: inherit; }
a {
color: inherit;
cursor: pointer;
text-decoration: none; }
a:hover {
opacity: 0.8; }
/* nav toggle */
.navi-toggle {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
cursor: pointer;
height: 2rem;
left: 2rem;
position: fixed;
top: 2rem;
width: 3.6rem;
z-index: 2; }
.navi-toggle:hover {
opacity: 0.8; }
.navi-toggle .navi-toggle-bar,
.navi-toggle .navi-toggle-bar::after,
.navi-toggle .navi-toggle-bar::before {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
background: white;
content: '';
height: 0.4rem;
width: 100%; }
.navi-toggle .navi-toggle-bar {
margin-top: 0; }
.navi-toggle .navi-toggle-bar::after {
margin-top: 0.8rem; }
.navi-toggle .navi-toggle-bar::before {
margin-top: -0.8rem; }
.navi-toggle.expanded .navi-toggle-bar {
background: transparent; }
.navi-toggle.expanded .navi-toggle-bar::after, .navi-toggle.expanded .navi-toggle-bar::before {
background: white;
margin-top: 0; }
.navi-toggle.expanded .navi-toggle-bar::after {
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg); }
.navi-toggle.expanded .navi-toggle-bar::before {
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg); }
/* nav */
.navi {
-webkit-transition: left 0.5s ease;
-moz-transition: left 0.5s ease;
-ms-transition: left 0.5s ease;
-o-transition: left 0.5s ease;
transition: left 0.5s ease;
background: #28dde0;
color: white;
cursor: pointer;
font-size: 2rem;
height: 100vh;
right: -30rem;
padding: 6rem 2rem 2rem 2rem;
position: fixed;
top: 0;
width: 20rem;
z-index: 1; }
.navi.expanded {
left: 0; }
.navi ul {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
list-style: none;
margin: 0;
padding: 0; }
/*# sourceMappingURL=nav.css.map */
/* NAVIGATION MENU */
div#main-menu {
width: 100%;
margin: auto;
text-align: center;
}
.btn-link {
font-weight: 400;
color: #007bff;
background-color: transparent;
font-size: 1.5rem;
color: #fff;
padding: 0;
}
ul.dropdown-list-item {
padding: 0;
}
ul.dropdown-list-item li {
list-style: none;
padding: 0;
line-height: 100%;
}
ul.dropdown-list-item li a {
font-size: 1rem;
}
.btn-link:hover{
color: #fff;
}
/*** NAVIGATION ICONS ***/
button.user-icon {
background-color: transparent;
border: none;
}
.nav-icons {
position: absolute;
right: 13%;
top: 23%;
}
/*** END NAVIGATION ICONS ***/
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navi">
<div id="main-menu">
<div class="main-menu-list">
<div class="main-menu-header" id="main-menu-one">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#dropdown-list-one" aria-expanded="true" aria-controls="main-menu">Mens</button>
</h5>
</div>
<div id="dropdown-list-one" class="collapse" aria-labelledby="main-menu-one" data-parent="#main-menu">
<div class="dropdown-list-body">
<ul class="dropdown-list-item">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
</div>
</div>
</div>
<div class="main-menu-list">
<div class="main-menu-header" id="main-menu-one">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#dropdown-list-two" aria-expanded="true" aria-controls="main-menu">Womens</button>
</h5>
</div>
<div id="dropdown-list-two" class="collapse" aria-labelledby="main-menu-one" data-parent="#main-menu">
<div class="dropdown-list-body">
<ul class="dropdown-list-item">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
</div>
</div>
</div>
<div class="main-menu-list">
<div class="main-menu-header" id="main-menu-one">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#dropdown-list-three" aria-expanded="true" aria-controls="main-menu">Accessories</button>
</h5>
</div>
<div id="dropdown-list-three" class="collapse" aria-labelledby="main-menu-one" data-parent="#main-menu">
<div class="dropdown-list-body">
<ul class="dropdown-list-item">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
</div>
</div>
</div>
<div class="main-menu-list">
<div class="main-menu-header" id="main-menu-one">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#dropdown-list-four" aria-expanded="true" aria-controls="main-menu">Equipments</button>
</h5>
</div>
<div id="dropdown-list-four" class="collapse" aria-labelledby="main-menu-one" data-parent="#main-menu">
<div class="dropdown-list-body">
<ul class="dropdown-list-item">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
</div>
</div>
<div class="main-menu-list">
<div class="main-menu-header" id="main-menu-one">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#dropdown-list-five" aria-expanded="true" aria-controls="main-menu">More</button>
</h5>
</div>
<div id="dropdown-list-five" class="collapse" aria-labelledby="main-menu-one" data-parent="#main-menu">
<div class="dropdown-list-body">
<ul class="dropdown-list-item">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</nav>
<nav class="navbar navbar-expand-lg navbar-default fixed-top" id="nav">
<div class="container">
<div class="navi-toggle">
<div class="navi-toggle-bar"></div>
</div>
<a class="navbar-brand" href="index.php"><img src="img/logo.png"></a>
</div>
<div class="container nav-icons">
<button type="button" class="iconton">
<img src="img/cart-product-white.png" alt="">
</button>
<button type="button" class="iconton" data-toggle="modal" data-target="#userSearch" id="icon-search">
<img src="img/navbar-icon.png">
</button>
<button type="button" class="iconton" data-toggle="modal" data-target="#userSign" id="icon-user">
<img src="img/user.png">
</button>
</div>
<div class="container">
</div>
</nav>
推荐阅读
- express - expressjs 并立即使用 zeit 创建 react 应用程序部署
- sql - sql更新多列的表。?
- java - 如何在哈希表的字符串值和整数键中分隔文件中的输入行?
- ansible - Ansible - 如果项目在循环中,则有条件地执行
- sql - 按最新日期和时间查找大型数据集中不同列值的行
- node.js - Mongo:如何显示来自 2 个不同集合的用户特定数据
- python - Flask form SelectField
- python - Why is my python timer trigger function not running at the correct time?
- angular - 处理复杂请求时如何改进服务器端渲染?
- javascript - 导入的函数在 puppeteer 中不起作用