如何修改querySelectorAll选中元素？实现按钮样式变更与下拉菜单

一、修复按钮点击与样式修改的基础问题 #

你之前的JS代码存在选择器错误：document.querySelectorAll('link')应改为document.querySelectorAll('.bttn')，要选中的是带bttn类的按钮而非link标签。

要实现点击按钮时修改其背景色，直接通过this或event.target操作当前点击元素即可，无需ID：

const buttons = document.querySelectorAll('.bttn');

buttons.forEach(el => {
    el.addEventListener('click', function() {
        // 修改当前点击按钮的背景色
        this.style.backgroundColor = 'red';
    });
});

如果需要点击切换样式（比如点击变红、再次点击恢复蓝色），用CSS类管理更规范：

/* 新增激活状态类 */
.bttn.active {
    background-color: red;
}

const buttons = document.querySelectorAll('.bttn');

buttons.forEach(el => {
    el.addEventListener('click', function() {
        // 切换激活类
        this.classList.toggle('active');
    });
});

二、实现无ID的下拉菜单 #

无需ID的核心思路是利用DOM结构关联，将下拉菜单作为按钮的兄弟元素，通过相对位置找到对应菜单。

1. 调整HTML结构 #

把按钮和对应下拉菜单放在同一个容器内：

<html>
<head><title>yes</title></head>
<body>
<div class="all-buttons">
  <!-- 按钮1组 -->
  <div class="button-group">
    <button class="bttn">BUTTON1</button>
    <div class="dropdown-menu">
      <a href="#">选项1</a>
      <a href="#">选项2</a>
    </div>
  </div>
  <!-- 按钮2组 -->
  <div class="button-group">
    <button class="bttn">BUTTON2</button>
    <div class="dropdown-menu">
      <a href="#">选项A</a>
      <a href="#">选项B</a>
    </div>
  </div>
  <!-- 按钮3组 -->
  <div class="button-group">
    <button class="bttn">BUTTON3</button>
    <div class="dropdown-menu">
      <a href="#">选项X</a>
      <a href="#">选项Y</a>
    </div>
  </div>
</div>
</body>
</html>

2. 添加CSS样式 #

设置下拉菜单的隐藏/显示状态及布局：

.all-buttons{
  display:flex;
  width: 100%
}
.button-group {
  width: 33%;
  position: relative; /* 让下拉菜单相对容器定位 */
}
.bttn{
  width: 100%;
  border: none;
  background-color: blue;
  padding: 20px 20px;
  color: white;
  cursor: pointer;
}
.bttn.active {
  background-color: red;
}
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background-color: #fff;
  border: 1px solid #ccc;
  display: none; /* 默认隐藏 */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.dropdown-menu a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: #333;
}
.dropdown-menu a:hover {
  background-color: #f5f5f5;
}
/* 显示下拉菜单的类 */
.dropdown-menu.show {
  display: block;
}

3. 编写JavaScript逻辑 #

点击按钮时切换对应下拉菜单的显示状态：

const buttons = document.querySelectorAll('.bttn');

buttons.forEach(button => {
    button.addEventListener('click', function() {
        // 获取当前按钮对应的下拉菜单
        const dropdown = this.nextElementSibling;
        // 切换按钮激活状态和菜单显示状态
        this.classList.toggle('active');
        dropdown.classList.toggle('show');
        
        // 可选：点击其他按钮时关闭当前打开的菜单
        buttons.forEach(otherBtn => {
            if (otherBtn !== this) {
                otherBtn.classList.remove('active');
                otherBtn.nextElementSibling.classList.remove('show');
            }
        });
    });
});

// 可选：点击页面其他区域关闭所有菜单
document.addEventListener('click', function(event) {
    if (!event.target.closest('.button-group')) {
        buttons.forEach(button => {
            button.classList.remove('active');
            button.nextElementSibling.classList.remove('show');
        });
    }
});

关键思路总结 #

• 无需ID时，利用nextElementSibling、parentElement等方法，通过DOM元素的相对位置关联按钮与下拉菜单。
• 用CSS类管理样式状态（激活、显示/隐藏），比直接操作style属性更易维护。

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