使用纯 JavaScript [无 jQuery] 显示更多/显示更少的多个元素的切换按钮

Question

我正在尝试创建一个小脚本，在单击按钮或链接后显示不同的隐藏 HTML 项目。

要求：

• 更改按钮文本：单击按钮后，将按钮文本从显示更多项目切换为隐藏项目。 （反之亦然）
• 多次折叠：脚本必须使多个元素可见
• 很高兴拥有：display: none 未硬编码到源代码中，但位于样式表中<style>display: none;</style>
• 没有 jQuery 或框架 - 纯最小的轻量级 JavaScript

脚本库：

我使用this Pure Javascript Show/Hide Toggle script作为基础并对其进行了修改。

我修改后的代码片段：

var button = document.querySelector('.toggle-button');
var menu = document.querySelector('.item');
button.addEventListener('click', function (event) {
  if (menu.style.display == "") {
      menu.style.display = "none";
      button.innerHTML = "Show more items";
  } else {
      menu.style.display = "";
      button.innerHTML = "Hide items";
  }
}
  );

<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item hidden-item" style="display: none;">Item 3</div>
<div class="item hidden-item" style="display: none;">Item 4</div>
<div class="item hidden-item" style="display: none;">Item 5</div>
<button class="toggle-button">Show more items</button>

代码笔：

https://codepen.io/anon/pen/ePxeVE

问题：

我的修改没有显示隐藏的项目。我已经在这个问题上花了几个小时，但我没有让脚本工作。 JavaScript 专业人士有什么想法如何在单击切换按钮时显示和隐藏多个元素？

Answer 1

您需要querySelectorAll 而不是querySelector 来检索和迭代多个元素。我建议改用 .hidden 类，然后您可以遍历 .hidden-items 并在每个上切换类：

const button = document.querySelector('.toggle-button');
const hiddenItems = document.querySelectorAll('.hidden-item');
let isHidden = true;
button.addEventListener('click', () => {
  button.textContent = isHidden
  ? 'Hide items'
  : 'Show more items';
  
  isHidden = !isHidden;
  hiddenItems.forEach(item => item.classList.toggle('hidden'));
});

.hidden {
  display: none;
}

<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item hidden-item hidden">Item 3</div>
<div class="item hidden-item hidden">Item 4</div>
<div class="item hidden-item hidden">Item 5</div>
<button class="toggle-button">Show more items</button>

Answer 2

.querySelector() 返回与查询匹配的第一个元素。您需要.querySelectorAll() 来获取所有匹配项，然后您必须遍历所有找到的元素以确定它们是否应该被隐藏。避免使用.getElementsByClassName()，因为这会返回一个"live node list"，它不适用于大多数用例并会影响性能。

您可能还需要另一个简单地指示项目是否可隐藏的类，以便在显示所有项目时，您会知道稍后再次隐藏其中的哪些项目。

此外，尽可能避免使用内联样式。只需提前设置 CSS 类，然后使用 element.classList.add() 和 element.classList.remove() 添加或删除它们。

最后，仅当您获取/设置的字符串实际上包含需要解析的 HTML 并且您完全控制该字符串时，才使用 .innerHTML。如果使用不当，它会浪费资源并在代码中打开安全漏洞。当您使用的字符串不包含任何 HTML 或不需要由 HTML 解析器解析时，请使用 .textContent。

评论在下面：

var button = document.querySelector('.toggle-button');

button.addEventListener('click', function (event) {
  // Get all the hideable items into an Array so that .forEach() can be safely used to loop over them
  let hiddenItems = Array.prototype.slice.call(document.querySelectorAll('.hideable'));
  
  // Are we hiding or showing?
  let showing = button.textContent === "Show more items";
  
  // Loop over the items
  hiddenItems.forEach(function(item){
    if(!showing){
      // If we are hiding, then add the .hidden-item class
      item.classList.add("hidden-item");
    } else {
      // Otherwise remove the .hidden-item class
      item.classList.remove("hidden-item");
    }
    
    // Update the button text:
    button.textContent = button.textContent === "Show more items" ? "Hide items" : "Show more items";
  });
});

/* This could be placed in an external .css file */
.hidden-item { display:none; }

<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item hidden-item hideable">Item 3</div>
<div class="item hidden-item hideable">Item 4</div>
<div class="item hidden-item hideable">Item 5</div>
<button class="toggle-button">Show more items</button>