如何在单个JavaScript函数中处理多个类/ID？点击按钮隐藏多li失效修复

首先回答你的第一个问题：当然可以在单个JavaScript函数中处理多个类/ID的元素！ #

你完全可以用一个函数统一处理不同选择器匹配到的元素，核心是用document.querySelectorAll()方法获取所有符合条件的元素集合，再遍历它们执行操作。比如要同时切换类为card的元素和ID为sidebar的元素，代码可以这么写：

function toggleElements() {
  // 一次性获取类为card的所有元素 + ID为sidebar的元素
  const elements = document.querySelectorAll('.card, #sidebar');
  elements.forEach(el => {
    el.style.display = el.style.display === 'none' ? 'block' : 'none';
  });
}

然后解决你遇到的具体问题：点击按钮只隐藏第一个li的问题 #

你的代码存在几个小疏漏，我来帮你逐一修复：

1. 函数调用参数错误：你写的onclick="toggle(li)"里的li是未定义的变量，浏览器根本识别不出它指向什么；
2. 用错了元素获取方法：document.getElementById()只能获取单个带指定ID的元素，而你的li都没设置ID，这个方法完全不适用；
3. 没必要逐个操作li：其实直接切换整个ul的显示状态更简单高效，不需要单独处理每个li。

修复后的完整代码示例： #

方法一：直接切换整个ul的显示（推荐）

<style>
.main ul {
  display: table;
  padding: 2px 20px;
}
/* 这里不需要单独设置li的display，控制父元素ul即可 */
</style>

<div class="main">
  <ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
  </ul>
</div>
<button class="btn">hide</button>

<script>
// 绑定按钮点击事件（推荐用这种方式，而非HTML内联绑定）
document.querySelector('.btn').addEventListener('click', function() {
  const ul = document.querySelector('.main ul');
  ul.style.display = ul.style.display === 'none' ? 'table' : 'none';
});

// 页面加载时初始化ul的显示状态，避免第一次点击样式异常
window.onload = function() {
  document.querySelector('.main ul').style.display = 'table';
};
</script>

方法二：如果确实需要单独控制每个li元素

<style>
.main ul {
  display: table;
  padding: 2px 20px;
}
.main ul li {
  display: block; /* 设置初始显示状态 */
}
</style>

<div class="main">
  <ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
  </ul>
</div>
<button class="btn">hide</button>

<script>
document.querySelector('.btn').addEventListener('click', function() {
  // 获取.main下ul里的所有li元素
  const lis = document.querySelectorAll('.main ul li');
  lis.forEach(li => {
    li.style.display = li.style.display === 'none' ? 'block' : 'none';
  });
});
</script>

内容的提问来源于stack exchange，提问作者Aashiq