Issue with bouncing dropdown menu

I am in the process of enhancing a Wordpress website by implementing a jQuery menu with sub-menus.

Below is the jQuery code snippet:

$(document).ready(function(){
   $('.menu > li').hover(function(){
      var position = $(this).position();
      $('.sub-menu', this).css('margin-left', position.left);
      $('.sub-menu', this).slideToggle('slow');
   });
});

You can also find this setup on JSFiddle: http://jsfiddle.net/K96mB/

The issue I am encountering is that when hovering over a link, the sub-menu repeatedly slides in and out, resulting in a noticeable "bounce effect". Despite my efforts, I have been unable to resolve this behavior.

Furthermore, I am wondering if there is a way to ensure that only one dropdown menu opens at a time?

Your assistance on these matters would be greatly appreciated. Thank you.

javascriptjqueryhtmlcsswordpress

Answer №1

In order to address the issue of the bouncing effect:

$('.sub-menu', this).stop().slideToggle('slow');

http://example.com/DerekL/K96mB/2/

Regarding your preference for only one dropdown open at a time, while it is feasible, it may result in delays as the second menu will need to wait for the first one to close before opening.

Answer №2

Here's a solution without the bouncing effect:

$(document).ready(function(){
 $('.menu > li').mouseenter(function(e){
   var position = $(this).position();
   $('.sub-menu', this).css('margin-left', position.left);
   $('.sub-menu', this).slideToggle('slow')

   });
});

I opted for using mouseenter instead of hover.

Additionally, is it feasible to ensure that only one dropdown is open at a time?

Indeed, it can be achieved by adding this snippet:

$('li').mouseleave(function(e){
    $('.sub-menu').hide()
});

Answer №3

To accomplish this task, you can utilize the mouseenter and mouseleave functions. Check out an updated version of your code on this jsfiddle link.

The key components are as follows:

 $('.menu > li').mouseenter(function(){
        ....
 });

 $('.sub-menu').mouseleave(function(){
        ....
 });

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

The functionality of displaying one div while hiding another upon click seems to be malfunctioning

Can anyone lend a hand? I'm having trouble with my code - the section isn't showing up after clicking the button. <script> $("#img1").on('click', function() { $("#div1").fadeIn(); $("#div2,#div3,#div4").fadeOut(); }); $(" ...

jquerycssshow-hide

Ordering dates by week in AngularJS 1

Currently, I have a list of objects: [{ name: one, date: 2017-09-18 }, { name: two, date: 2017-09-11 }, { name: three, date: 2017-09-13 }] I am looking to organize this list by week. Perhaps like the following structure: { 1week(or , m ...

javascriptangularjsdate

Ways to enlarge a YouTube thumbnail upon loading using JavaScript

I recently found a solution to my question on how to prevent YouTube videos from repeating even when different embedded codes are used. I have a specific need to resize the thumbnail image of my YouTube video to width:146px and height:124px when the page l ...

javascriptjqueryhtmljquery-mobileyoutube-javascript-api

Tips for managing a fixed-positioned element during scrolling and zooming events

I have a situation where I need a fixed-position element to stay at the top-right corner of the viewport. Here is the HTML code: <div class = "header"> <p>This heading has an absolute position</p> </div> And here is the CSS: .he ...

javascriptjqueryhtmlcss

Breaking down arrays in Typescript

Let's say I have an array like this: public taskListCustom: any=[ {title: 'Task 1', status: 'done'}, {title: 'Task 2', status: 'done'}, {title: 'Task 3', status: 'done'}, {title: 'Task ...

javascriptarraysangulartypescript

Issues with sending emails through Nodemailer in a Next.js project using Typescript

I'm currently working on a personal project using Nodemailer along with Next.js and Typescript. This is my first time incorporating Nodemailer into my project, and I've encountered some issues while trying to make it work. I've been followin ...

javascriptreactjstypescriptnext.jsnodemailer

Tutorial on React JS and Python Django: Understanding the concept of an infinite loop in componentDidUpdate

I'm currently going through an online video tutorial that teaches how to create a CRUD full-stack app using React, Django, and SQLite. However, I've encountered an issue with fetching table data causing an infinite loop. It appears that the probl ...

javascriptreactjsdjangosqlite

Is it possible to execute JavaScript in VSCode without the need for Node.js?

Is there a way to run JavaScript in VSCode using a school-issued laptop that does not allow the download of Node.js? I have searched for alternatives, but most tutorials recommend downloading Node.js. ...

javascriptnode.js

An argument error in IE 8 caused by an invalid procedure call

Is there a way to access the opener's class in a child window created using window.open? This works smoothly in W3C browsers, but fails in IE 8. On the other hand, I tested using an iframe and it seems to work fine across all browsers. The main goal o ...

javascriptinternet-explorergoogle-maps

Issue with Inline JS not functioning correctly in Flask when integrated with Bootstrap 5

I'm developing a Flask web app with Bootstrap 5 and attempting to incorporate inline JS, but it's not functioning as expected. Specifically, I'm trying to use a simple alert() component, but nothing is displaying on the page. Interestingly ...

javascriptflaskjinja2bootstrap-5

Unable to trigger submission in jQuery validate function after validation check

I'm currently facing an issue with my form validation using the jQuery validate plugin. Although I have successfully implemented validation for the desired areas of the form, I am unable to submit the form even after filling in all the required input ...

javascriptjqueryvalidation

Using JSTL within JavaScript

Can JavaScript be used with JSTL? I am attempting to set <c:set var="abc" value="yes"/> and then later retrieve this value in HTML and execute some code. The issue I'm facing is that the c:set always executes even when the JavaScript condition ...

javascripthtmljspjstl

To activate two separate click events, one for an absolute element and another for the element positioned behind it, simply click on the desired absolute element to trigger both actions

Is it possible to trigger click events for both of these elements? position: relative container ELEMENT 1: standard div ELEMENT 2: position: absolute div In real life, element 2 is a transparent backdrop designed to capture clicks on top of the header ...

javascripthtmlcssreactjs

Adjust the overall size of the CSS baseball field

Attempting to adjust the size of the baseball field proved challenging, as it wasn't a simple task. Is there a way to achieve this effectively? Thanks, HTML - is using DIV the only method for resizing? I couldn't find a way to resize everything a ...

javascripthtmlcssnode.jsresponsive-design

Cannot chain promises using 'then'

Having trouble understanding why the 'describeDir' promise chain is not working properly. Can anyone help me figure out what I did wrong here? Everything in the code seems to run, but functions like then or finally from the promise API never get ...

javascriptpromise

Seasonal selection tool

I need a quarterly date picker feature, ideally using Angular. I am interested in something similar to the example shown below: https://i.stack.imgur.com/9i0Cl.png It appears that neither Bootstrap nor (Angular) Material have this capability. Are there a ...

javascriptangular

Can a ng-repeat value be assigned to a text input field?

<tr ng-repeat="person in users" ng-class="{'chosen': person.AdmissionID == currentSelection}" ng-click="selectRow(person.AdmissionID)"> <td>{{person.AdmissionID}}</td> <td>{{person.AdmissionNumber}}</td> ...

javascripthtmlangularjs

Modify the width of the <nz-date-picker> component from Ng-Zorro

Currently using Ng-Zorro for my template styling and working on implementing a date picker that I want to align perfectly with the dropdown menu above it. I would like to adjust the width of the date-picker manually within the template, but after visiting ...

htmlcssangularng-zorro-antd

Clicking to remove added child element

I have written a script that creates an image popup when the site loads. Here is the code: <script type="text/javascript"> function showPopup() { var div = document.createElement('div'); div.className += 'popup'; div.inne ...

javascripthtmlcss

Stop the animated fun with Jquery Play

I've created a code snippet for fading testimonials: function rotateTestimonials() { $("#test-rotator .roter:hidden:first").fadeIn(500).delay(1000).fadeOut(500, function() { $(this).appendTo($(this).parent()); rotateTestimonials(); }).mouse ...

jquery