JavaScript实现触发器仅作用于对应子元素：侧边栏下拉菜单优化

问题原因分析 #

1. 箭头全翻转的原因
   你最初的代码用了全局选择器$('div.sidebar button.sidebtn span.material-icons-round')，会选中页面所有匹配的元素，所以点任意按钮都会触发所有箭头的类切换。
   你尝试event.target.firstChild.toggleClass报错，是因为event.target和firstChild都是原生DOM节点，toggleClass是jQuery专属方法，原生元素不能直接调用，必须先转为jQuery对象。

2. 重复函数的问题
   你为每个按钮写独立函数，本质是没利用DOM层级关系关联按钮和对应下拉菜单，而是靠硬编码类名（u1、u2、u3）绑定，导致代码冗余且难维护。

优化方案 #

第一步：调整HTML结构（推荐） #

把下拉菜单<ul>放到对应父<li>内部，让DOM层级更清晰，方便后续遍历查找目标元素：

<ul>
  <li>LEVEL 1
    <button class="sidebtn" data-target="u1">
      <span class="material-icons-round">expand_more</span>
    </button>
    <!-- 下拉ul移入父li -->
    <ul class="dropdown u1">
      <li><a href="lessons?page=u1">the Weather</a></li>
      <li><a href="lessons?page=u2">Emotions</a></li>
      <li><a href="lessons?page=u3">the Family</a></li>
      <li><a href="lessons?page=u4">Food</a></li>
    </ul>
  </li>
  <!-- 其他下拉项同理 -->
  <li>LEVEL 2
    <button class="sidebtn" data-target="u2">
      <span class="material-icons-round">expand_more</span>
    </button>
    <ul class="dropdown u2">
      <!-- 菜单内容 -->
    </ul>
  </li>
</ul>

给按钮加data-target属性关联对应下拉菜单类名，同时给所有下拉菜单加统一dropdown类，方便控制默认隐藏样式。

第二步：通用jQuery代码实现 #

只需一次事件绑定，就能处理所有按钮的点击逻辑：

// 绑定所有.sidebtn的点击事件
$('.sidebtn').click(function() {
  // 1. 仅切换当前按钮的箭头类
  $(this).find('span.material-icons-round').toggleClass('flip');
  
  // 2. 切换对应下拉菜单的显示状态
  const targetClass = $(this).data('target');
  $(`.dropdown.${targetClass}`).toggleClass('show');

  // 可选：点击新按钮时关闭已打开的菜单
  // $('.sidebtn').not(this).find('span.material-icons-round').removeClass('flip');
  // $('.dropdown').not(`.${targetClass}`).removeClass('show');
});

关键知识点说明 #

• $(this)：事件回调中，this指向当前触发事件的DOM元素，转为jQuery对象后可调用其方法。
• .find()：在当前元素的后代中查找匹配元素，确保只操作当前按钮内部的箭头。
• data()：获取元素的data-*属性值，动态关联下拉菜单，避免硬编码类名。

如果不想修改HTML结构，也可通过DOM层级关系查找下拉菜单：

$('.sidebtn').click(function() {
  // 切换当前箭头
  $(this).find('span.material-icons-round').toggleClass('flip');
  // 找到父li的下一个兄弟ul（对应下拉菜单）
  $(this).parent('li').next('ul').toggleClass('show');
});

这种方式无需加data-target，但依赖固定DOM结构，后续修改HTML时需保持层级关系。

内容的提问来源于stack exchange，提问作者Adrian Abdul-Bahá