当展开的子元素属性aria为true时，向父元素添加一个类

Question

当下拉菜单打开时，我需要给第一个div一个灰色背景。我已经能够根据标记的aria为子元素扩展来应用css，但我不知道如何为父元素这样做。我正在使用Vue，所以我不想使用任何Jquery。

<li v-for="(item, index) in locations" :key="index">
<div id="active-hov-div">
<a
id="brand-nav-item-link-id"
class="brand-nav-item-link"
type="button"
data-bs-toggle="dropdown"
aria-expanded="false"
>
<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>

Answer 1

您尝试过:first-child吗？

https://www.w3schools.com/cssref/sel_firstchild.asp

Answer 2

也许你可以在v-for中使用index，并根据你的风格定义gray-bg，然后使用index === 0来设计是否需要显示灰色背景，我希望它能为你工作

<template>
<!-- ... -->
<li v-for="(item, index) in locations" :key="index">
<div id="active-hov-div" :class="{'gray-bg':index === 0}">
<a
id="brand-nav-item-link-id"
class="brand-nav-item-link"
type="button"
data-bs-toggle="dropdown"
aria-expanded="false"
>
<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>
<!-- ... -->
</template>
<style>
/*...*/
.gray-bg {
background-color: gray;
}
/*...*/
</style>