Switching from 'click' to 'hover' will make the dropdown menu more accessible for keyboard users

I'm currently updating an existing dropdown menu that meets WCAG standards but I need to tweak the functionality so that it activates on hover instead of click. Below is the code snippet:

$(document).ready(function() {

  $('.has-submenu').each(function (i, event) {
    var $event = $(event);
    var name = $event.text();
    $event.addClass('open-menu')
      .attr('aria-expanded', 'false')
      .attr('aria-label', 'Open ' + name + ' menu');
  });

  $('.open-menu').on('click', function (event) {
    event.preventDefault();
    var $target = $(event.target);
    if ($target.attr('aria-expanded') == 'true') {
      $target.attr('aria-expanded', 'false');
      return;
    }
    var parentMenus = $target.parentsUntil('.nav-items').filter('ul').prev('a.open-menu');
    $('.nav-items a.open-menu[aria-expanded=true]').not(parentMenus).attr('aria-expanded', 'false');
    $target.attr('aria-expanded', 'true');
  });
});

To see this script in action, you can visit this link: http://jsfiddle.net/58wtuc9x/

I would greatly appreciate any assistance with this task!

Answer №1

Consider making a tweak...

$('.open-menu').on('click'

Change it to this...

$('.open-menu').on('click mouseenter'

By doing so, the code will run either when clicked or when the mouse hovers over the element. You can also remove 'click' for just the hover effect.

Answer №2

To implement a hover event handler, simply attach it to the element with the class open-menu.

$('.open-menu').hover(function (event) {
    event.preventDefault();
    var $target = $(event.target);
    if ($target.attr('aria-expanded') == 'true') {
      $target.attr('aria-expanded', 'false');
      return;
    }
    var parentMenus = $target.parentsUntil('.nav-items').filter('ul').prev('a.open-menu');
    $('.nav-items a.open-menu[aria-expanded=true]').not(parentMenus).attr('aria-expanded', 'false');
    $target.attr('aria-expanded', 'true');
  });

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

"jQuery ajax call encountering an error with the 'XMLHttpRequest' object while trying to connect to an AJAX-enabled WCF

I followed a tutorial on MSDN to create a basic AJAX-enabled WCF service. [ServiceContract(Namespace = "AjaxWcf")] [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)] public class AjaxWcf { [OperationCont ...

Stop the erratic movement of elements in Chrome

Visit the following link: . Upon loading the page in Chrome, there seems to be a slight movement of every other element between the title and lyrics (including key selector and links). The same issue occurs when hovering over these sections. It appears to ...

Content in Bootstrap not filling entire mobile screen

The content in this form does not stretch to full screen on mobile phones, but it appears properly on computers and tablets. Please advise on how to solve this issue. https://i.stack.imgur.com/S2XkS.jpg <link rel="stylesheet" href="https://maxcdn.bo ...

Manage your video playback by tracking the movement of your mouse on the screen

Is it possible to use mouse position on screen to control a video? Imagine, if I have my cursor on the left side of the screen, the video starts from the first frame. But as I move my cursor to the right side, the video progresses until the cursor reaches ...

Restrict the use of Shiny's unbindAll and bindAll functions to a specific HTML element

According to the Shiny site, it is recommended that before making changes to the DOM, such as adding or removing inputs and outputs, you should inform Shiny by using unbindAll and bindAll: function modifyDom() { Shiny.unbindAll() insertI ...

Choose multiple options, with a maximum limit of 2 selections

I am currently working with a multiselect feature for various subjects. I would like to limit the selection to a maximum of 2 options and disable the rest. Additionally, if a user deselects an option, it should become available again for selection. <se ...

Error 500 encountered when attempting to post an object via the web API

I recently developed a web API that utilizes an ADO SQL Server entity in a database-first approach. The database contains a single table with an auto-incrementing identity column and a nvarchar column. While my GET functions are functioning properly, I am ...

Having trouble displaying data from a MongoDB database using ng-repeat in AngularJS

Currently, I am facing an issue while trying to retrieve data from the database and display it using ng-repeat. The getAll function in the factory is fetching the data properly, returning an object with all the information. However, when I try to display t ...

Issue with Materialize Sidenav: Not functional on iOS devices including iPhones, functions correctly on all other devices

My Materialize Sidenav is functioning on all devices except for iPad and iPhone. If you want to check out the code, here is the link to the repository: repo. Take a look at index.html (line 44 down) and js/onloadSetup.js. I attempted adding this in onload ...

Adaptable Bootstrap navigation bar

In the process of creating a responsive menu, I have designed a navbar for desktop that includes 3 text links and 3 small pictures that are also links. However, when transitioning to a smaller screen size, my goal is to keep the 3 small pictures as they a ...

Generating input fields dynamically in a list and extracting text from them: A step-by-step guide

I am designing a form for users to input multiple locations. While I have found a way to add input boxes dynamically, I suspect it may not be the most efficient method. As I am new to this, I want to ensure I am doing things correctly. Here is how I curren ...

What happens if I define both the left and right properties for spans?

This is a class for span with the CSS properties position:absolute; top:0px; left:0px; right:0px; .textStyle1 { font-size:24px; font-family:'Arial'; position:absolute; top:0px; left:0px; right:0px; } #div1 { position:absolute; lef ...

Save the ID of the list item by wrapping it and storing it in a table cell

I need help with a situation where I have a list of items stored in table cells, and each cell contains a list item. My goal is to save the id of each list item into the cell that contains it. For example: <td><li id='itemID'>content ...

Modifying css background in real-time based on the current weather conditions

Is there a way to dynamically change the background image in CSS based on the weather condition? I'm utilizing the wunderground API to retrieve the weather data, which is stored in the weather variable. I am struggling with how to update the backgrou ...

Issue with floating navigation bar functionality when resizing the page

After much tinkering, I have managed to create a floating navigation bar for my website. Most of the time, it works perfectly fine, but there's an issue when the window size is adjusted in the floating mode. Take a look at the image below for referenc ...

Emptiness is the only value that gives me true success

When I have to verify whether your content is empty or not, if it is empty, simply go back and signal success to me. It will not move forward and inform me that there is an issue with the lack of content. Issues arise only when I have empty fields for em ...

creating dynamic parameterized URLs in Laravel

For example: Here are a few names. - Mujib - Amjed - Anees When someone clicks on "Mujib," the URL should remain the same and only the parameter should change. When someone clicks on "Amjed," the URL parameter should change to . ...

Fade out with CSS after fading in

After setting an animation property on an HTML element to display it, I want the same animation in reverse when a button is clicked to hide it. How can I achieve this effect? "Working Animation": .modal { animation: myAnim 1s ease 0s 1 normal fo ...

What is the best way to add borders to table cells that have a non-zero value

I am trying to create a table using a function and it currently looks like this: table { border: 1px solid; } td { width: 30px; height: 30px; text-align: center; } <table> <tr> <td>2</td> <td>0</td> ...

Order of flexbox items when placed within separate divs?

Looking to rearrange the order of items using flexbox, but hitting a roadblock because one of the items I want to reorder is in a different div and not a direct child of the same parent as the other items. <div class="wrapper"> <div class="some ...