多个元素共享同一类名时如何仅对单个目标元素执行DOM修改？

• 不需要为每行设置唯一类名，通过基础事件绑定逻辑即可精准识别被点击的行：
  1. 先完善HTML结构：在每个.option容器内部添加隐藏的描述内容区域，默认设置为不显示
  2. 遍历所有.option元素绑定点击事件，通过事件回调的currentTarget属性直接获取当前被点击的行元素
  3. 仅操作当前点击行内的描述区域和箭头样式即可，不会影响其他行

HTML调整 #

<section class = "section section-menu">
    <div class = "option">
        <!-- 新增头部容器，包裹原有标题、图标和箭头 -->
        <div class="option-header">
            <div class = "option-container">
                <img src = "img/Breakfast-Figma.png" alt="早餐图片">
                <h3 class = "option-text">&nbsp;&nbsp;早餐</h3>
            </div>
            <ion-icon name="chevron-up-circle-outline" class = "dropdown-arrow"></ion-icon>
        </div>
        <!-- 新增的描述区域，默认隐藏 -->
        <div class="option-description">
            这里放置早餐分类对应的具体餐品、价格等描述内容
        </div>
    </div>
    <!-- 剩余7个分类的option都按照上述结构调整即可，原有属性无需修改 -->
</section>
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>

新增/调整CSS #

.section-menu {
  margin-top: 5%;
}
.option {
  width: 75%;
  margin: 0 auto 16px;
  display: flex;
  /* 改为纵向排列，让描述区域显示在标题下方 */
  flex-direction: column;
}
.option-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.option-container {
  width: max-content;
  display: flex;
}
.option-text {
  float: right;
  margin: auto;
  font-family: Apercu-light;
}
.dropdown-arrow {
  height: 60px;
  font-size: 22px;
  float: right;
  margin: auto;
  margin-right: 5%;
  /* 新增箭头旋转过渡效果 */
  transition: transform 0.2s ease;
}
/* 新增描述区域默认样式 */
.option-description {
  display: none;
  padding: 12px 0 12px 60px;
  font-family: Apercu-light;
}
/* 展开状态样式控制 */
.option.expanded .option-description {
  display: block;
}
.option.expanded .dropdown-arrow {
  transform: rotate(180deg);
}

JS逻辑 #

// 获取所有菜单行元素
const menuOptions = document.querySelectorAll('.option');
// 遍历绑定点击事件
menuOptions.forEach(option => {
    option.addEventListener('click', function() {
        // 切换当前点击行的展开状态即可，所有展示逻辑由CSS控制
        this.classList.toggle('expanded');
    })
})

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