如何实现点击单一下拉按钮时仅对应SVG箭头旋转并支持复位

• 三个下拉按钮共用同一个id="navButton1"，违反HTML唯一id的规范，本身就会带来选择器匹配异常
• 原有JS逻辑点击后直接全局选中所有带.arrow类的元素切换样式，没有限定到当前点击的按钮内部，导致所有箭头同步旋转
• 只监听了按钮自身的点击事件，没有关联下拉菜单的实际展开/关闭状态，点击页面其他位置关闭下拉时，没有触发箭头复位的逻辑
• 样式类维护冗余：同时用reset和rotate两个类管理旋转状态，很容易出现类名叠加冲突

可直接用的修正实现 #

调整后的HTML #

去掉重复的id，给所有下拉按钮加统一的类标识，删掉img上冗余的reset类：

<!-- === Dropdown Menu === -->
<div class="collapse navbar-collapse" id="navToggler">
  <div class="dropdown">
    <button class="btn dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
      Product <img class="arrow" src="/blogr/images/icon-arrow-light.svg">
    </button>
    <ul class="dropdown-menu" aria-labelledby="navButton1">
      <li><a class="dropdown-item" href="#">Overview</a></li>
      <li><a class="dropdown-item" href="#">Pricing</a></li>
      <li><a class="dropdown-item" href="#">Marketplace</a></li>
      <li><a class="dropdown-item" href="#">Features</a></li>
      <li><a class="dropdown-item" href="#">Integrations</a></li>
    </ul>
  </div>
  <div class="dropdown">
    <button class="btn dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
      Company <img class="arrow" src="/blogr/images/icon-arrow-light.svg">
    </button>
    <ul class="dropdown-menu" aria-labelledby="navButton1">
      <li><a class="dropdown-item" href="#">About</a></li>
      <li><a class="dropdown-item" href="#">Team</a></li>
      <li><a class="dropdown-item" href="#">Blog</a></li>
      <li><a class="dropdown-item" href="#">Career</a></li>
    </ul>
  </div>
  <div class="dropdown">
    <button class="btn dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
      Connect <img class="arrow" src="/blogr/images/icon-arrow-light.svg">
    </button>
    <ul class="dropdown-menu" aria-labelledby="navButton1">
      <li><a class="dropdown-item" href="#">Contact</a></li>
      <li><a class="dropdown-item" href="#">Newsletter</a></li>
      <li><a class="dropdown-item" href="#">LinkedIn</a></li>
    </ul>
  </div>
</div>
<!-- END -->

简化后的CSS #

去掉冗余的reset类，默认状态就是0度旋转，过渡效果统一声明：

.arrow {
  transform: rotate(0deg);
  transition: transform 0.3s ease;
}
.arrow.rotate {
  transform: rotate(180deg);
}

修正后的JavaScript #

直接复用Bootstrap下拉组件自带的状态事件，不需要自己手动监听全局点击、判断点击位置，自动覆盖所有关闭下拉的场景：

// 下拉展开时，仅给当前按钮内的箭头加旋转类
$('.dropdown-toggle').on('show.bs.dropdown', function () {
  $(this).find('.arrow').addClass('rotate');
})
// 下拉收起时，移除当前按钮内箭头的旋转类
// 触发场景包括：再次点击按钮关闭、点击页面空白处关闭、点击菜单项后关闭
$('.dropdown-toggle').on('hide.bs.dropdown', function () {
  $(this).find('.arrow').removeClass('rotate');
})

实现效果说明：

• 只有当前点击打开的下拉按钮对应的箭头会旋转，其他按钮的箭头保持初始状态
• 不管通过哪种方式关闭下拉菜单，箭头都会自动复位到初始角度
• 类名只维护rotate一个状态，不会出现样式冲突

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