How to achieve a reverse slideToggle effect with jQuery when refreshing the page

After creating a custom menu on Wordpress using jQuery slideToggle to toggle dropdown on hover, everything seemed to be working perfectly. However, I noticed that when I refreshed the page while moving my cursor between two menu items with dropdown menus, the slideToggle effect would reverse on one of them.

    jQuery(document).ready(function() {
      jQuery(".has-mega-menu").has('.sub-menu').children('.sub-menu').hide();
      jQuery('.has-mega-menu').hover(function() {
        jQuery(this).has('.sub-menu').children('.sub-menu').stop().slideToggle();
      });
    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li id="menu-item-28" class="has-mega-menu menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-28">
      <a href="shop-link">Shop</a>
      <ul class="sub-menu" style="height: 222px; padding-top: 0px; margin-top: 0px; padding-bottom: 0px; margin-bottom: 0px; display: none;">
        <li id="menu-item-42" class="mega-menu-column menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-42"><a href="#">TEST</a>
          <ul class="sub-menu">
            <li id="menu-item-41" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-41">
              <a href="#">Test Item 1</a>
            </li>
            <li id="menu-item-36" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-36">
              <a href="Shop-link">Test Item 2</a>
            </li>
          </ul>
        </li>
        <li id="menu-item-43" class="mega-menu-column menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-43">
          <a href="#">TEST 2</a>
          <ul class="sub-menu">
            <li id="menu-item-44" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-44">
              <a href="#">Test Item 1</a>
            </li>
            <li id="menu-item-45" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-45">
              <a href="#">Test Item 2</a>
            </li>
          </ul>
        </li>
        <li id="menu-item-46" class="mega-menu-column menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-46">
          <a href="#">TEST 3</a>
          <ul class="sub-menu">
            <li id="menu-item-47" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-47">
              <a href="#">Test Item 1</a>
            </li>
          </ul>
        </li>
      </ul>
    </li>

javascripthtmljquerycsswordpress

Answer №1

I encountered a strange issue related to the order of elements when toggling, so I decided to tackle it by handling slide down and slide up separately. Additionally, I included z-index properties to ensure a smooth sliding animation consistency.

jQuery(document).ready(function() {
    jQuery('.has-mega-menu > .sub-menu').hide();
    jQuery('.has-mega-menu').hover(function() {
        jQuery(this).has('.sub-menu').children('.sub-menu').stop().slideDown(250);
        jQuery(this).children('.sub-menu').css('z-index', '2')
    }, function() {
        jQuery(this).has('.sub-menu').children('.sub-menu').stop().slideUp(250);
        jQuery(this).children('.sub-menu').css('z-index', '1')
    });
});

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 jQuery Show Hide feature is experiencing issues specifically on Internet Explorer

Everything looks good in Firefox and Chrome, but unfortunately it's malfunctioning in IE. Does anyone have a suggestion for hiding select Dropdown options? I attempted using CSS with display: none but it didn't work. $j("#id option[value=&apos ...

javascriptjquerycss

What HTML5 form JavaScript polyfill offers the most extensive functionality and compatibility across different browsers?

The improved attributes and tags introduced in HTML5 are quite beneficial. Unfortunately, support for these features is limited in Chrome and Firefox, with virtually no support in IE9 and earlier versions. After researching, I have come across Modernizr a ...

htmlformspolyfillswebshim

How to Prevent Scrolling When Modal is in Use on Full Page JS

I am trying to achieve the functionality where when the modal is open, I want to prevent full-page scrolling in JavaScript. The issue arises when I open the modal and try to scroll, it ends up moving the content that's behind the modal, which is actua ...

javascripthtmljquerycssfullpage.js

The content inside the HTML body doesn't fully encompass the dimensions of the mobile screen

I am working on making my application flexible by using 100vw width and 100vh height for the components. Everything displays perfectly in any resolution on a computer browser, but when viewed on a mobile device, an empty background is drawn below the bod ...

htmlcssfrontend

Generate dynamic forms utilizing JSON data

I am in the process of developing an application that enables users to answer questions about themselves. The questions are being retrieved from an API. My next step is to generate a form with these questions as entry fields. I am currently utilizing a met ...

javascripttypescriptangularionic2

Utilize webpack to import functions from separate files

I am looking to streamline the process of importing and using functions from a different file. Ideally, I would like to simply call these functions by their name without any extra prefixes or naming conventions. However, I am aware that using eval() can po ...

javascriptwebpack

Retrieve the current shipping zone in Woocommerce

I have developed a personalized shipping method for my eCommerce store. () Within the calculate_shipping function, I would like to determine the price of my shipping method based on the specific shipping zone: If the shipping zone is 'Zone 1', ...

phpwordpresswoocommerce

What is the procedure for adding a URL path in jQuery?

When using $(this).attr("href"); in the jQuery Ajax url field, it correctly retrieves the URL path. However, if I try to use a prefix in front of it like this: $.ajax({ type: 'GET' url: 'api/' + $(this).attr("href"); }) the co ...

javascriptjqueryajax

Retrieve the most recently added child from the Firebase cloud function

Seeking assistance in retrieving the most recently added child in a cloud function. Below is the code snippet I am using and I'm curious if there is a specific function or query I can utilize to achieve this task without having to iterate through each ...

javascriptfirebasegoogle-cloud-functions

What is the best method for directing to various pages on a GitHub Pages website?

My GitHub Pages site is live at this link. While the splash page loads perfectly, clicking on the circle to transition to the next page, 'landing.html', leads to a 404 error. I have exhausted all possible solutions to address this issue, includin ...

javascripthtmljquerygithub-pages

The Javascript Ajax loader gif is malfunctioning

I'm currently working on creating an Ajax loader gif using XMLHttpRequest. When I type something in the input field, a list of different words appears. This technique is commonly used in search engines as you type in the search box. However, I am als ...

javascriptajax

Is the "add" feature malfunctioning?

My code is experiencing an issue where the URL and ID are not being passed correctly from one function to another. When I click on a link that contains the add() function, it fails to capture the URL and ID. <a href="#" style="color:#FFF;" onclick="add ...

javascripthtml

When using Angular, automatically shift focus to the next input field by pressing the

I am faced with a challenge involving multiple editable inputs on my screen. Alongside these editable inputs, there are buttons and disabled inputs present. The current behavior is such that when I press Tab, the focus shifts to the HTML elements between ...

javascripthtmlangularangular-material

Generate TypeScript type definitions for environment variables in my configuration file using code

Imagine I have a configuration file named .env.local: SOME_VAR="this is very secret" SOME_OTHER_VAR="this is not so secret, but needs to be different during tests" Is there a way to create a TypeScript type based on the keys in this fi ...

javascriptnode.jstypescriptenvironment-variables

When the user clicks, I plan to switch the audio source

I am looking to update the audio source when a button is clicked, but I am having trouble getting it to work. image description data() { return { audioSrc: '' } }, methods: { setActiveAudio(item) { this.$refs.audioE ...

javascriptvue.js

Assign the filename to the corresponding label upon file upload

I've customized my file uploader input field by hiding it and using a styled label as the clickable element for uploading files. You can check out the implementation on this jsFiddle. To update the label text with the actual filename once a file is s ...

javascriptjqueryhtmlformsfile-upload

The unexpected behavior occurs when jQuery mobile causes the page to reload

Incorporating jQuery mobile with other systems, I have a scenario where I must display an ajax loaded dialog and send data back to the main page based on the link clicked (with class link). $(document).live("pageinit", function(event) { $(document).on ...

jqueryajaxjspjquery-mobile

Firebase Error: In order to deploy without hosting via source, options must be provided. (app/no-options)

After developing a Next.js application, I integrated Firebase authentication and utilized the useContext hook for managing user state throughout the app. Here's the snippet of code for the AuthContext: auth.js import { createContext, useState, useEff ...

javascriptfirebasenext.jsfirebase-authenticationreact-context

Express.js and gridfs-stream are unable to retrieve the error

Imagine an effortless image download server where Express.js takes the request, fetches an image from MongoDB GridFS, and serves it as a response. Everything works fine when the request is valid and the file exists. The issue arises when it fails to catc ...

javascriptnode.jsexpressgridfs-stream

Implementing JSON responses in Express JS

My apologies for any language errors as English is not my first language, I am using Google Translate :) I have a question.. Here is the MySQL Query I am working with: SELECT destinations.*, questions.*, answers.* FROM destinations INNER JOIN questions ...

javascriptmysqlnode.jsexpress