使用纯 JavaScript [否 jQuery] 显示 more/Show 多个元素的较少切换按钮

Question

我正在尝试创建一个小脚本，在单击按钮或 link 后显示不同的隐藏 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>

Codepen:

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

问题：

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

Answer 1

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

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() returns the first element that matches the query. You'll need .querySelectorAll() to get all the matches and then you'll have to loop over all the found elements to determine if they should be hidden or not. Avoid .getElementsByClassName() as this returns a 这不适合大多数用例并且会影响性能。

您可能还需要另一个 class，它仅指示某个项目是否可隐藏，以便在显示所有项目时，您会知道稍后再次隐藏哪些项目。

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

最后，只使用.innerHTML when the string you are getting/setting actually contains HTML that needs to be parsed and when you are in complete control of that string. When used improperly, it wastes resources and can open up security holes in your code. When the string you are working with does not contain any HTML or doesn't need to be parsed by the HTML parser, use .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>

使用纯 JavaScript [否 jQuery] 显示 more/Show 多个元素的较少切换按钮

Show more/Show less Toggle Button for Multiple Elements with Pure JavaScript [No jQuery]

javascript

show

toggle

hide

show-hide