[英]Add a class to parent element when child element attribute aria expanded is true
I need to give the first div a grey background when the dropdown is open.当下拉菜单打开时,我需要给第一个 div 一个灰色背景。 I've been able to apply css depending on the a tag's aria-expanding for the child elements but I'm not sure how to do that for a parent element.
我已经能够应用 css 取决于 a 标签的 aria-expanding 子元素,但我不知道如何为父元素做到这一点。 I'm using Vue so I don't want to use any Jquery.
我正在使用 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>
Did you try the :first-child
?你试过
:first-child
吗?
https://www.w3schools.com/cssref/sel_firstchild.asp https://www.w3schools.com/cssref/sel_firstchild.asp
May be you can use the index
in you v-for
and define the gray-bg
at your styles, then use the index === 0
to deside if is needed to show the gray background,I hope it can work for you可能您可以使用
v-for
中的index
并在 styles 中定义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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.