Question

TLDR; ，我在此代码示例中尝试创建的功能是单击一个框（可折叠的具有active类），然后单击搜索框，活动类别将被删除，从而关闭可折叠的类别。当前，删除类不起作用。知道为什么吗？

详细信息：

我有一个可折叠块的列表，单击它们时会得到active类。您可以搜索一个搜索框以过滤出要显示的块，然后单击它以显示更多内容。我已经意识到，当您返回搜索并且没有“取消单击”一个框（以关闭可折叠框）时，该框仍为active（非常有意义）。

我有一个想法，即在搜索框聚焦时，我将遍历所有可折叠对象并删除活动类本身（反过来，关闭可折叠对象）。

我已经找到了可折叠的活动对象，但是我无法删除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>

Answer 2

这是一种使用尽可能少的JavaScript的方法。如果禁用了JavaScript，唯一会中断的是搜索框。单击时，各节仍将按预期方式打开和关闭。

手风琴的状态存储在复选框中，每节一个。每个部分的标题都是一个label元素，单击该元素可以切换该部分的复选框。这些部分使用CSS :checked选择器展开和折叠。

var sections = [].slice.call(document.querySelectorAll(".accordion li")),
  searchAccordion = function() {
    var value = document.getElementById("search").value.toLowerCase();
    sections.map(function(section) {
      var content = section.textContent.toLowerCase();
      section.querySelector("input").checked = content.includes(value);
    });
  };

body {
  font-family: sans-serif;
}

.accordion {
  padding-left: 0;
  margin: -1rem;
}

.accordion li {
  list-style-type: none;
}

.accordion input {
  display: none;
}

.accordion label {
  background-color: #eee;
  transition: background-color 100ms;
  cursor: pointer;
  font-size: 1.2rem;
  padding: 1rem;
  display: block;
}

.accordion label:hover {
  background-color: #444;
  color: white;
}

.accordion .content {
  padding: 1rem;
  display: none;
}

.accordion input:checked ~ .content { 
  display: block; 
}

<input id="search" onKeyup="searchAccordion()" type="text" placeholder="Search for FAQ" autocomplete="off">

<h1>A to B sales</h1>

<ul class="accordion">
  <li>
    <input type="checkbox" id="section1">
    <label for="section1">What are our shipping policies?</label>
    <div class="content">They are crazy cool.</div>
  </li>
  <li>
    <input type="checkbox" id="section2">
    <label for="section2">Are you making more products?</label>
    <div class="content">We'll sell you more very soon</div>
  </li>
</ul>

单击搜索框时删除班级

2 个答案: