javascript - 无法删除类列表

Question

我正试图在我的代码中删除一个名为 active 的类。当使用 addEventListener 单击元素时，类 active 出现，但我想使用函数 onClick 搜索类 active 并将其删除。仍然允许 addEventListener 在单击另一个元素时添加 active。这是我想要实现的一个示例，在移动设备中我想做多层次的，其中 div 堆叠在另一个 div 之上并且可以返回到前一个 div https://codyhouse.co/demo/mega-dropdown/index.html#0

const dropDowns = document.querySelectorAll(".mobile-nav .dropdown");
for (var i = 0; i < dropDowns.length; i++) {
  dropDowns[i].addEventListener("click", function() {
    this.children[1].classList.add("active");
  });
}

function closeDropDown() {
  const temp = document.querySelectorAll(".mobile-nav .dropdown-content");
  temp.classList.remove("active");
}

<div class="dropdown">
  <button class="dropbtn">{{ link.title }}
            <i class="fa fa-caret-down"></i>
          </button>
  <div class="dropdown-content">
    <div class="mm-row">
      <div class="mm-column">
        <div class="mm-subcategory">
          <i class="fas fa-arrow-left" onclick="closeDropDown()"></i>
          <h3>{{ link.title | link_to: link.url }}</h3>
        </div>
        {% for child_link in linklists[child_list_handle].links %} {{ child_link.title | link_to: child_link.url }} {% endfor %}
      </div>
      <div class="dropdown-feature">
        {% assign collection= collections.winter-wear %}
        <img src="{{ collection.image | img_url: '908x330' }}">
      </div>
    </div>
  </div>
  <!-- /dropdown-content -->
</div>

Answer 1

querySelectorAll 函数返回一个节点数组。请改用 querySelector。

function closeDropDown() {
  const temp = document.querySelector(".mobile-nav .dropdown-content");
  temp.classList.remove("active");
}

function myFunction() {
  var element = document.querySelector("#myDIV");
  element.classList.remove("bgStyle");
}

.bgStyle {
  width: 100%;
  padding: 25px;
  background-color: coral;
  color: white;
  font-size: 25px;
  box-sizing: border-box;
}

<p>Click the "Try it" button to remove the "mystyle" class from the DIV element:</p>

<button onclick="myFunction()">Try it</button>

<div id="myDIV" class="bgStyle">
This is a DIV element.
</div>