未捕获的TypeError无法读取null的属性“classlist”

Question

我一直在阅读这个问题的其他可能重复，但我仍然没有找到完成此任务所需的解决方案。所以，我下载了一个包含汉堡包的所有宽度的CSS文件，但是他们的类名与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>