javascript - 单击搜索框时删除类

Question

TLDR; 我试图在此代码示例中创建的功能是单击一个框(collapsible 具有 active 类)，然后单击 <搜索框，事件类被删除关闭可折叠。目前，删除类不起作用。知道为什么吗？

更详细:

我有一个可折叠 block 列表，当单击它们时，它们会获得一个active类。您可以通过搜索框搜索来筛选出您想要显示的区 block ，然后点击该区 block 即可显示更多内容。我意识到，当您返回搜索并且没有“取消单击”某个框(以关闭可折叠框)时，该框仍然处于事件状态(这很有意义)。

我有一个想法，当搜索框焦点时，我将循环遍历所有可折叠的并删除事件类本身(反过来，关闭可折叠的)。

我已经可以找到哪个可折叠项处于事件状态，但无法删除 active 类。

这是因为最初单击该框来添加类，并且必须再次物理单击才能将其删除吗？

var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.maxHeight) {
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    }
  });
}

function searchClick() {
  var searchTable;
  searchTable = document.getElementById("search-table");
  faqButtons = searchTable.getElementsByTagName("button");
  for (i = 0; i < faqButtons.length; i++) {
    if (faqButtons[i].classList.contains("active")) {
      console.log('THIS ONE: ', faqButtons[i]);
      faqButtons[i].classList.remove("active");
    }
  }
}

.collapsible {
  display: flex;
  justify-content: space-between;
  background-color: white;
  color: black;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 20px;
}

.collapsible span {
  padding-left: 5px;
  padding-right: 5px;
}



.collapsible .active,
.collapsible:hover {
  background-color: #333;
  color: white;
}

.content {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

.content p {
  margin-top: 10px;
}

<div class="search-faq">
  <input autocomplete="off" type="text" id="search-faq" placeholder="Search for FAQ" onfocus="searchClick()" />
</div>

<div id="search-table" class="superHidden">
  <div id="wolfandgrizzly-FAQ-search">
    <h1>A to B sales</h1>
    <button class="collapsible"><span>What are our shipping policies?</span></button>
    <div class="content">
      <p>
        They are crazy cool.
      </p>
    </div>
    <button class="collapsible"><span>Are you making more products?</span></button>
    <div class="content">
      <p>
        We'll sell you more very soon
      </p>
    </div>
  </div>

Answer 1

我不明白您从哪里得知 active 类没有被删除。看来这没有问题。我认为问题在于您通过 maxHeight 设置显示答案，但在单击搜索框时并未重置它。我已经在此代码段中更新了它，但本质上它归结为在循环中添加以下内容:

var content = faqButtons[i].nextElementSibling
content.style.maxHeight = null

var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.maxHeight) {
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    }
  });
}

function searchClick() {
  var searchTable;
  searchTable = document.getElementById("search-table");
  faqButtons = searchTable.getElementsByTagName("button");
  for (i = 0; i < faqButtons.length; i++) {
    if (faqButtons[i].classList.contains("active")) {
      console.log('THIS ONE: ', faqButtons[i]);
      faqButtons[i].classList.remove("active");
    }
    var content = faqButtons[i].nextElementSibling
    content.style.maxHeight = null
  }
}

.collapsible {
  display: flex;
  justify-content: space-between;
  background-color: white;
  color: black;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 20px;
}

.collapsible span {
  padding-left: 5px;
  padding-right: 5px;
}



.collapsible .active,
.collapsible:hover {
  background-color: #333;
  color: white;
}

.content {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

.content p {
  margin-top: 10px;
}

<div class="search-faq">
  <input autocomplete="off" type="text" id="search-faq" placeholder="Search for FAQ" onfocus="searchClick()" />
</div>

<div id="search-table" class="superHidden">
  <div id="wolfandgrizzly-FAQ-search">
    <h1>A to B sales</h1>
    <button class="collapsible"><span>What are our shipping policies?</span></button>
    <div class="content">
      <p>
        They are crazy cool.
      </p>
    </div>
    <button class="collapsible"><span>Are you making more products?</span></button>
    <div class="content">
      <p>
        We'll sell you more very soon
      </p>
    </div>
  </div>