When the child element's "aria-expanded" attribute is set to true, a CSS class should be dynamically

Is there a way to apply a grey background to the first div when the dropdown is open? I've managed to add CSS based on the child elements' aria-expanding attribute, but I'm unsure how to do it for a parent element. Since I am using Vue, I prefer not to use any 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>
javascriptcssvue.jswai-aria

Answer №2

Perhaps you could utilize the index in your v-for loop and define the gray-bg within your styles. Then, use index === 0 to determine whether the gray background should be displayed. Hopefully, this solution works for you.

<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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can you enhance a component by including additional props alongside an existing onClick function?

As a newcomer to React and TypeScript, I've created a simple component that looks like this: const CloseButton = ({ onClick }: { onClick: MouseEventHandler }) => { const classes = useStyles(); return <CloseIcon className={classes.closeButto ...

javascriptreactjstypescript

Adding items to an array within a jQuery each loop and performing a jQuery ajax request

I am trying to loop through an array, push the results into a JavaScript array, and then access the data outside of each loop and AJAX call. Can anyone explain how to do this? This is what I have attempted: var ides = ["2254365", "2255017", "2254288", ...

javascriptjqueryarraysajax

What are the best practices for ensuring secure PUT and DELETE requests?

For the backend of my current project, I have a question regarding security measures. As an illustration, one of the tasks involves handling various "/notes" requests. /notes => retrieve all notes belonging to the authenticated user /notes => creat ...

javascriptphpnode.jsbackend

Tips for extracting individual lines from a Buffer using streams?

There seems to be an issue with the file stream I'm receiving from STDIN where line breaks disappear within the buffers. I am looking for a way to process and parse these lines using the Stream approach. Can someone help me out? util.inherits(Parse ...

javascriptnode.jsstream

The changing of colors does not function properly when clicked in JavaScript

I am having an issue with a drop-down list that offers two options: blue and green. When I select blue and click on the text input field, its background color alternates between blue and black (the default text field color). The same applies when I choose ...

javascriptjqueryhtmlcss

Sweet treats, items, and data interchange format

Can an object be converted to a string, stored in a cookie, retrieved, and then parsed back to its original form when the user logs on again? Here's a concise example of what I'm asking: var myObject = { prop1: "hello", prop2: 42 }; va ...

javascriptjsoncookies

Increasing the level of CSS list counters

HTML <ol> <li>item1 <ol> <li>item2</li> </ol> </li> <li>item1 <ol> <li>item2</li> <li>item3</li> </ol> </li> </ol> SC ...

htmlcsscss-counter

What is the most efficient method of organizing form components together?

After exploring numerous tutorials, I have yet to discover the ideal solution for properly marking up a form that contains logical groupings of elements such as labels, controls (input or select), and previous values - essentially single fields. My prefer ...

htmlcssforms

use css to align multiple div elements

I am struggling to line up more than five div tags on the same line. Here is my CSS: <style> #yes { float: left; width: 18%; margin:1px; } </style> Example of HTML code: echo '<div id="yes">'.'<b>'.'Job T ...

htmlcss

Is there a way to postpone the action so that the bot will not acknowledge the second command until after I have completed the first command

client.on('message', async (message) => { let author = message.author.username if (message.author.bot) return; if (message.content.startsWith('-queue open ')) { message.content = message.content.replace('-queue o ...

javascriptnode.jsdiscord.js

What is the best method for inserting the HTML content from a specific div into a textarea?

Everything seems to be working fine, but once I insert the HTML into the textarea, an issue arises where the div gets wrapped within another div, causing the layout to break. var urls = []; $('body').on('click', '.btn_video&apos ...

javascriptjquery

Adjustable height and maximum height with overflow functionality

Currently, I am in the process of developing a task manager for my application and facing an obstacle when trying to calculate the height of a widget. My goal is to determine the maximum height (assuming a minimum height is already set) by subtracting a ce ...

javascriptjquerycss

Invoking a Node.js function using a URL reference

Is there a way to call a function located in a remote URL? I have the page URL and the function name. The server-side application is running on NodeJs Express, and the function structure is as follows: function executer(param1, param2){ //logic re ...

javascriptnode.jshttpexpress

Error not identified in ajax function for form submission

For some reason, in IE8 specifically, the alert function is not firing and the ajax part of my code is not running when I try to submit a form. Even though I have included a return false, the form still gets submitted. Why is this issue only occurring in ...

javascriptjqueryformsform-submit

What could be causing my browser to display twice the height value?

After running the code below on my browser, I noticed that the height value is rendered double. To start off, I tested the following code in about:blank. In the HTML: ... <canvas id="canvasArea" style=" width: 500px; height: ...

javascripthtmlcanvasmicrosoft-edge

Tips for populating an array with boolean values when a checkbox change event occurs:

I am looking to fill the answers array with boolean values. The checkboxes on my form are generated dynamically, but there will only be four of them. When a checkbox is unchecked, its corresponding value in the answers array should be false; when checked, ...

javascripthtmlarraysreactjscheckbox

Getting rid of the outline on <html> while tabbing in Firefox

An odd outline keeps appearing as I tab through elements on a website, but only in Firefox and not in Chrome, Safari, or Opera. To identify the element causing the focus, I used Firebug console by typing: document.activeElement. It showed: >>> d ...

htmlcssfirefoxtabsoutline

Vuetify Container with a set maximum width that remains fixed

I recently started developing a web application using Vue.js and Vuetify (https://vuetifyjs.com/en/). Currently, I have a basic layout with 3 columns. However, I noticed that the width of these columns is restricted to a maximum of 960px due to some defau ...

cssvue.jsvuetify.js

The arrangement of elements varies based on the type of display

I'm still learning HTML and CSS, and I've noticed that the layout of my elements changes depending on the screen size. Everything looks good on my 24" monitor, but some elements overlap on my 15" laptop screen. What could be causing this issue, ...

htmlcss

Try utilizing multiple URLs to trigger separate AJAX requests with a single click

I am looking to utilize multiple JSON files from different URL APIs simultaneously. Each URL will serve a different purpose - populating table headers with one URL, and table information with two or three URLs. Currently, my code looks like this: $(docum ...

javascriptjqueryajax