Vue中当子元素aria-expanded为true时如何为父元素添加类

解决方案 #

你可以通过以下两种方案实现需求，均不需要引入jQuery，符合Vue开发规范：

方案1：CSS :has() 选择器（代码量最少，无需修改JS逻辑） #

目前主流新版本浏览器均已支持:has()父元素选择器，你可以直接添加以下CSS样式实现效果，无需修改模板代码：

/* 注意：你原代码中div的id在v-for循环中会重复，建议先把id="active-hov-div"改为class="active-hov-div" */
.active-hov-div:has(.brand-nav-item-link[aria-expanded="true"]) {
  background-color: #e5e7eb; /* 可自定义灰色深浅 */
}

注意：该方案不兼容 Safari 15.4 以下、Chrome 105 以下版本浏览器，如果你的产品需要覆盖极旧版本用户，可使用方案2。

方案2：Vue状态绑定（兼容性拉满，符合Vue最佳实践） #

通过绑定Bootstrap下拉的内置事件同步展开状态，动态给父div加背景类即可：

第一步：添加响应式状态

如果是Vue3：

// script中添加响应式变量，记录当前展开的下拉项索引
import { ref } from 'vue'
const openIndex = ref(-1)

如果是Vue2：

// data中添加变量
data() {
  return {
    openIndex: -1
  }
}

第二步：修改模板代码

<li v-for="(item, index) in locations" :key="index">
  <!-- 动态绑定背景类，同时把重复的id改为class -->
  <div 
    class="active-hov-div" 
    :class="{'bg-gray': openIndex === index}"
  >
    <a
      class="brand-nav-item-link"
      type="button"
      data-bs-toggle="dropdown"
      aria-expanded="false"
      <!-- 监听Bootstrap下拉的显示/隐藏事件，同步展开状态 -->
      @show.bs.dropdown="openIndex = index"
      @hide.bs.dropdown="openIndex = -1"
    >
      <label class="active-hov">
        {{item.label}}
      </label>
        <i class="fa fa-sort-down test-down"></i>
        <i class="fa fa-sort-up test-up"></i>
    </a>
    <!-- 原下拉菜单代码保持不变 -->
    <div class="dropdown-menu dropdown-menu-end locations-ul">
      <li class="locations-li">
        <FindACommunity />
      </li>
      <ul class="locations-dropdown-ul">
      <li v-for="(item3, index3) in item.locationsTitles" :key="index3" class="nav-item" style="padding-bottom: 8px">
        <a class="brand-nav-dropdown-link" :href="item3.url">{{item3.title}}</a>
      </li>
      </ul>
    </div>
  </div>
</li>

第三步：添加自定义样式

.bg-gray {
  background-color: #e5e7eb; /* 自定义灰色深浅 */
}

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