javascript - 使用纯 JavaScript [无 jQuery] 显示更多/显示更少的多个元素的切换按钮
问题描述
我正在尝试创建一个小脚本,HTML
在单击按钮或链接后显示不同的隐藏项目。
要求:
- 更改按钮文本:单击按钮后将按钮文本从显示更多项目切换到隐藏项目。(反之亦然)
- 多重折叠:脚本必须使多个元素可见
- 很高兴拥有:
display: none
没有硬编码到源代码中,而是位于样式表中<style>display: none;</style>
- 没有 jQuery 或框架 - 纯最小的轻量级 JavaScript
脚本基础:
我使用这个 Pure Javascript Show/Hide Toggle 脚本作为基础并对其进行了修改。
我修改后的代码片段:
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 专业人士的任何想法如何在单击切换按钮时显示和隐藏多个元素?
解决方案
您需要querySelectorAll
而不是querySelector
检索和迭代多个元素。我建议改用一个.hidden
类,然后您可以遍历.hidden-item
s 并在每个上切换类:
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 - Complex Grouping : Array Reduce
- javascript - 如何在 JavaScript 中向结构化数组添加更多元素?
- javascript - 如何获得提取变量的智能感知?
- javascript - 无法在 javascript 中为 adobe acrobat 更改文本字体
- c# - Microsoft Graph - 使用块上传的 SharePoint 文档上传丢失 HttpContext
- go - foo.go + foo_test.go 的任何有用替代品
- r - 如何将矩阵第 i 列中的所有元素提升到 i 次方?
- android - 我需要将 AdMob 广告单元 ID 保存在安全的地方吗?
- postgresql - 无法使新的 postgres 配置文件设置生效
- java - CodenameOne 组合框 NumberFormatException