当子元素属性aria扩展为真时向父元素添加一个类答案

【问题标题】：Add a class to parent element when child element attribute aria expanded is true当子元素属性aria扩展为真时向父元素添加一个类
【发布时间】：2022-01-02 07:55:07
【问题描述】：

当下拉菜单打开时，我需要给第一个 div 一个灰色背景。我已经能够根据子元素的 a 标签的 aria-expanding 应用 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>

【问题讨论】：

你能告诉我你想在哪个 div 上申请课程吗？我猜您的代码中当前提供了两个下拉菜单。
@Shreeraj 我想将样式添加到 id 为“active-hov-div”的 div 中。我希望它在 id 为“brand-nav-item-link-id”的标签为 aria-expanded=true 时具有灰色背景，而在其为 false 时具有白色背景。

标签： javascript css vue.js wai-aria

【解决方案1】：

你试过:first-child吗？

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

【讨论】：

【解决方案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>

【讨论】：