使用纯JavaScript为多个元素显示更多/更少切换按钮[无jQuery] [英] Show more/Show less Toggle Button for Multiple Elements with Pure JavaScript [No jQuery]

问题描述

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

要求：

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

脚本库：

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

我修改的代码片段：

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

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

问题：

我的修改不显示隐藏项。我已经在这个问题上花了几个小时，但我没有让剧本发挥作用。如何在点击切换按钮时显示和隐藏多个元素？

推荐答案

您需要querySelectorAll而不是querySelector来检索和迭代多个元素。我建议使用.hidden类，然后您可以迭代.hidden-item，只需在每个：

上切换类 数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

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>

这篇关于使用纯JavaScript为多个元素显示更多/更少切换按钮[无jQuery]的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！