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 issue with displaying Fontawesome icons using @import in CSS-in-JS was not resolved

I recently changed how I was importing Fontawesome icons: src/App.css @import "@fortawesome/fontawesome-free/css/all.css";` After shifting the @import to CSS-in-Js using emotion: src/App.js // JS: const imports = css` @import "@fortawes ...

javascriptcssreactjsemotioncss-in-js

What is the best way to customize the appearance of a form element within an angular-schema-form schema without affecting the overall

Currently, I am in the process of constructing a form using the incredible angular-schema-form. Creating the form schema object has been a success so far. My goal is to configure all the form components within the schema using the x-schema-form property in ...

cssangularjsionic-frameworkangular-schema-form

Import a fixed JSON document in Webpack

In the code I have, there is a construction that looks like this: var getMenu = function () { return window.fetch("portal/content/json/menu.json").then(function (data) { return data.json(); }); }; I attempted the following in my webpack.c ...

javascriptangularjsjsonwebpack

Encountering an issue with an AngularJS form containing ng-repeat when attempting to submit

Here is my form structure: two text inputs followed by an ng-repeat with a text input and radio button inside. <form class="form-horizontal" id="myForm" name="myForm"> <div class="form-group"> <label for="name" class="co ...

javascriptangularjsforms

Improving code efficiency for checkboxes in upcoming TypeScript versions

Is it possible to create a single checkbox component and dynamically pass different values to it without repeating code? I have set up these checkboxes to help me check the maximum and minimum values of some API data. const[checkValMax, setCheckValMax]= u ...

javascriptreactjsnext.jstailwind-css

Ways to turn off hover highlighting

Is there a way to disable the highlighting effect of the <select> element in HTML? When you hover over items in the dropdown list, a blue color strip moves with your mouse. I need to find a way to get rid of this effect. Here is an example of the c ...

javascripthtmlcssdrop-down-menu

When a radio button is clicked, the class is applied, but the radio button itself remains unselected

Take a look at the code I'm currently working with and check out the included JSFiddle. Problem: Even though I click on the radio or checkbox, the class is added but the radio or checkbox is not selected. Please help me understand this code so I c ...

jquery

Is there a method to detect the presence of a bot in your discord server using another bot?

I am developing my own unique discord bot and I am looking to implement a feature that can determine if a specific bot is present in the server. Here's how I've been approaching it: if (!message.guild.args[0]) In this code, args[0] represents ...

javascriptnode.jsdiscorddiscord.js

Struggling with setting up Chrome options using Selenium WebDriver in JavaScript?

Encountering an issue while attempting to access a specific website using Selenium WebDriver in JavaScript with the Chrome browser. In the provided code snippet, the browser driver is initialized; however, there seems to be a problem when utilizing setChro ...

javascriptselenium-webdriverbrowser-automationchrome-options

What is the most effective way to bring in "server-side only" code in Next.js?

I am currently working on my index page's getServerSideProps function and I want to utilize a function called foo, which is imported from another local file. This function relies on a specific Node library that cannot be executed in the browser becaus ...

javascriptnode.jsnext.jsisomorphic-javascript

What is the reason for webpack searching for jQuery even though it is not necessary for the module?

Before I proceed with my question, I want to clarify that I may not fully grasp the intricacies of this issue and I apologize if it does not meet the standards of Stackoverflow's Q&A. Currently, we are facing a challenge in our project while tryi ...

javascriptnode.jsnpmwebpack

Material-UI now offers the ability to customize the shadows array within createMuiTheme to support up to 25 different elevations

Currently working on removing shadows in the Material-UI theme. Came across this useful solution that fixed the issue. However, encountered an error related to this topic. const theme = createMuiTheme({ palette: { primary: { light: red[300], ...

javascriptmaterial-designmaterial-ui

Exploring the capabilities of jQuery's .post function within a custom template form on Wordpress

I am currently developing a customized contact form for a WordPress website and attempting to submit it via ajax with the help of jQuery. However, I am encountering a 404 error in the console when using the $.post function, even though I can access the URL ...

jqueryajaxwordpress.post

CSS and markup that appear the same are producing different renderings in the browser

I recently purchased the Ambrosia bootstrap theme, but I am facing difficulties with setting up the login page. You can view my login page here. The issue I am encountering involves the Twitter, Facebook, and Info icons that are positioned to the left of ...

htmlcsstwitter-bootstrap

"Discover the magic of jQuery: Unveiling the hidden div with one simple CSS visibility change

I want to implement a functionality on my screen where the Previous button is hidden initially and only becomes visible when the user clicks the Next button. I have set the CSS property for the Previous button to hide it by default, but despite using an if ...

javascriptjqueryhtmlcss

Utilizing Vue.js to ensure that nested components remain within the parent component even when the store

I have been working on a chat messaging system, where I initially populate the store with root messages and then map the state of that list (array). Everything works fine when posting a new message - the store updates and displays the new post. However, I ...

javascriptvue.jsvuejs2vue-component

Modifying Font Style in Angular 4 Material

Is there a way to change the font in Angular 4 Material material.angular.io using the styles file in .CSS format instead of SASS? While the documentation offers an example for SASS at: https://github.com/angular/material2/blob/master/guides/typography.md ...

cssangularmaterial-design

Style the modal body to display as a block on both desktop and mobile devices using CSS

My goal is to ensure that the modal-body is vertically aligned for optimal visibility on both mobile phones and PCs. I am utilizing bootstrap for this purpose. <div class="modal-body" style="display: inline-block;"> <div> ...

htmlcssbootstrap-5

Align the font-awesome icon in the middle of the input box vertically

Is there a way to vertically center the font-awesome icon inside an input box using Bootstrap without setting margins, padding values, or adjusting the height of the input? .inset-0 { top: 0; right: 0; bottom: 0; left: 0; } .inset-y-0 { top: ...

cssbootstrap-4

Steps for creating a square button

Is it possible to create a square button on my website that still functions like a traditional button? I want the button to change appearance slightly when scrolled over. Currently, I have an example where the button is not clickable: http://jsfiddle.net ...

css