未捕獲的TypeError無法讀取null的屬性“ classlist”

Question

我一直在閱讀此問題的其他可能重復內容，但仍然找不到解決該問題所需的解決方案。 因此，我下載了一個CSS文件，其中包含所有寬度的Hamburger，但是它們的類名與Bootstrap的Nav類沖突，因此我更改了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> 

如果有人可以解決這個問題，那就太好了！ 謝謝！

Answer 1

navi: document.querySelector('.navi')  will be `navi: document.querySelector('.navi')` as it is a class

 (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>