如何实现每个分类下仅单个选中产品的div背景色切换

嘿，我来帮你搞定这个菜单的单选交互需求！先提一句，你写的分类里重复了salad，应该是手滑写错了吧？比如可能是dessert之类的？不过下面的示例我先按你给的分类来，你可以随时调整~

要实现同分类下只能选中一个产品的效果，核心思路很明确：点击某个产品时，先把它所属分类下的所有产品的选中状态清空，再给当前点击的产品加上选中样式就行。下面是具体的实现步骤：

1. 先搭好HTML结构 #

每个分类用一个容器包起来，里面的产品做成可点击的div，这样方便后续通过父容器找到同分类的产品：

<!-- 主菜分类 -->
<div class="menu-category">
  <h3>main-dish</h3>
  <div class="menu-item">香煎牛排</div>
  <div class="menu-item">烤三文鱼</div>
  <div class="menu-item">秘制烤鸡</div>
</div>

<!-- 配菜分类 -->
<div class="menu-category">
  <h3>trimmings</h3>
  <div class="menu-item">奶油土豆泥</div>
  <div class="menu-item">烤时蔬</div>
</div>

<!-- 沙拉分类 -->
<div class="menu-category">
  <h3>salad</h3>
  <div class="menu-item">凯撒沙拉</div>
  <div class="menu-item">希腊沙拉</div>
</div>

<!-- 汤品分类 -->
<div class="menu-category">
  <h3>soup</h3>
  <div class="menu-item">南瓜浓汤</div>
  <div class="menu-item">番茄罗宋汤</div>
</div>

<!-- 这里你写了第二个salad，我假设是甜点分类，你可以改成自己需要的 -->
<div class="menu-category">
  <h3>dessert</h3>
  <div class="menu-item">提拉米苏</div>
  <div class="menu-item">巧克力慕斯</div>
</div>

2. 写基础样式和选中状态 #

用CSS设置默认的背景色，以及选中后的样式，让用户能一眼区分选中状态：

/* 分类容器样式 */
.menu-category {
  margin: 15px 0;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
}

/* 产品默认样式 */
.menu-item {
  padding: 8px 12px;
  margin: 6px 0;
  background-color: #fff; /* 默认白色背景 */
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.2s; /* 加个过渡动画，更丝滑 */
}

/* 选中后的样式 */
.menu-item.selected {
  background-color: #2196F3; /* 选中时用蓝色，你可以换成任何你喜欢的颜色 */
  color: #fff;
}

3. 核心交互逻辑（原生JS） #

不用依赖任何框架，原生JS就能轻松实现。思路就是：点击产品时，先找到它所在的分类容器，然后清空这个容器里所有产品的选中状态，最后给当前点击的产品加上选中类：

// 获取所有的产品元素
const allMenuItems = document.querySelectorAll('.menu-item');

// 给每个产品绑定点击事件
allMenuItems.forEach(item => {
  item.addEventListener('click', function() {
    // 找到当前产品所属的分类容器
    const parentCategory = this.closest('.menu-category');
    // 获取这个分类下的所有产品
    const categoryItems = parentCategory.querySelectorAll('.menu-item');
    
    // 先清空当前分类下所有产品的选中状态
    categoryItems.forEach(i => {
      i.classList.remove('selected');
    });
    
    // 给当前点击的产品添加选中状态
    this.classList.add('selected');
  });
});

为啥这么做？ #

• 用closest('.menu-category')可以快速定位到当前产品的父分类容器，不管你后续加多少分类，代码都不用改，扩展性超强；
• 先清空同分类的选中状态再设置当前，完美保证了每个分类只有一个选中项；
• 加了CSS过渡动画，背景色切换不会显得生硬，用户体验更好。

如果你的分类确实是两个salad，那只要把对应的分类容器的标识统一就行，代码会自动把它们归为同一分类，实现单选效果~

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