How to implement a delay for submenu dropdown in Bootstrap 3

I am trying to implement a delay on a submenu that I have created, rather than the entire bootstrap3 dropdown menu. The goal is to allow users to easily move their cursor to the submenu without it closing unexpectedly. Although the jquery code should still be functional in this scenario, I am encountering issues with the implementation.

If you could take a moment to review this bootply example - and offer some assistance or advice on why this is not working as intended, I would greatly appreciate it!

jQuery('li.dropdown-submenu').hover(function () {
    jQuery(this).find('ul.dropdown-menu').stop(true, true).delay(200).fadeIn();
}, function () {
    jQuery(this).find('ul.dropdown-menu').stop(true, true).delay(200).fadeOut();
});
javascriptjqueryhtmlcsstwitter-bootstrap

Answer №1

To fix the issue, you must eliminate this line from your CSS:

.dropdown-submenu:hover > .dropdown-menu{
    display:block;
}

By removing this code snippet, it should prevent the instant display of the dropdown submenu. I tested this solution on your bootply and found that it worked flawlessly.

Best of luck with your project!

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

List items that are not in any particular order spilling over onto the next

Having an issue with an unordered list where the list items aren't all on the same line. The 5th element is dropping to the next line even though each item is set to 20% of the container. The math adds up, so not sure what's causing the problem. ...

css

Aligning content in a div with proportional elements, maintaining left alignment of the elements

Trying my hand at creating an HTML template to display TV shows as cover artwork. The layout is flexible, showing up to five shows per row on larger screens and a minimum of two on smaller screens like smartphones. It's been a while since I've wo ...

htmlcssfluid-layout

Using AngularJS, learn how to populate array objects within a JSON object

I'm trying to load array objects from a multi-select control, then populate a model object called "name" with its name and age values. After that, I want to load an array from a select element into the model object. However, the ng-model directive on ...

javascriptangularjsarraysjsonmodel

Trouble rotating camera in THREE.JS?

How can I adjust my camera to look behind, with the center of the pong table being at x=0,z=0? I've tried changing the camera.lookAt settings but haven't had success. You can see the current camera view here. scene = new THREE.Scene(); scene ...

javascriptthree.jscamerarotation

Is there a way to apply textTransform to all components across the board?

I need to ensure that all text in my muiv5 project is capitalized by default, unless specifically overridden using sx or individual component styling. My attempted solution: <ThemeProvider theme={theme}> <IntlProvider locale="en& ...

cssreactjsmaterial-uinext.js

When working with Vuejs, if you try to use "axios" in a .js file, you may encounter an error

I am currently working with VueJS and attempting to send a GET request to my API. I am using axios, but encountering an issue when trying to import it. If I use require for the import, I receive this error: Uncaught ReferenceError: require is not defined. ...

javascripthtmlvue.jsaxiosget

Allowing access via Access-Control-Allow-Origin for both ajax calls and HttpURLConnection requests

So I was attempting to access a web URL (which I don't have direct access to) that returns a JSON formatted string. Initially, when trying with an AJAX call, I encountered the error "No Access-Control-Allow-Origin' header is present on the reque ...

javajqueryajaxhttpurlconnection

Display results in a Web application using Google Apps Script

function doGet() { return HtmlService.createHtmlOutputFromFile("vi"); // var output = HtmlService.createHtmlOutput('<b>Hello, world!</b>'); } function doPost() { return HtmlService.createHtmlOutputFromFile("vi"); // var out ...

javascripthtmlwebgoogle-apps-scriptgoogle-apps

Issue with Sequential Drop Down List Functionality in ASP.Net MVC View Page

I am currently in the process of migrating code from one project to another. Although the code works fine in the original project, it is not functioning properly in the new one. I’m uncertain if something was overlooked on my end. Within this code, ther ...

javascriptc#asp.net-mvc

Display a progress bar on the index page of the grid view

Seeking assistance in displaying a progress bar on the grid view page index. Currently, I have successfully implemented a progress bar on button click and would like to replicate this functionality when the user switches from 1 to 2. Here is the modal pop- ...

c#javascriptasp.netgridviewprogress-bar

How to target and set focus on dynamically generated input field when the ID is unknown

I am facing an issue with a jQuery/AJAX function that loads HTML form elements from the server. The form fields vary, and I want to set focus on the first available input field after the load is complete. I have tried: $(':input:enabled:visible:firs ...

javascriptjqueryfocusforms

Next.js is refusing to render an array of HTML elements

Consider this scenario where I have a block of code in TypeScript that attempts to create and display a list of elements. Here is a sample implementation: const MenuList = ():ReactElement => { const router = useRouter(), liElements:any = []; con ...

javascripthtmlcsstypescriptnext.js

Tips for updating the content of a div with fresh data using a slideshow effect in jQuery

Imagine you have a div called A and an array filled with text data. When t=0, div A will display $data[0]. Then, after every n seconds, I want the div to show the next piece of data in the array. I am interested in creating a transition effect similar to ...

javascriptjqueryhtmlcssjquery-ui

Is it possible to create a CSS code that targets specific browsers for a particular style to be applied?

My project has external CSS that contains all the styles for my site. The site looks great in Firefox, but it becomes a mess in Internet Explorer (as usual). Is there a way to write CSS so that specific styles only apply to certain browsers? For example, ...

htmlcssstylesheet

Obtain the response body in Nest JS middleware

Currently, I am working on developing logging middleware for my project. My main goal is to log the response body specifically in 500 responses. However, I have encountered an issue where the response body is not present in the Response object when using a ...

javascriptnode.jsexpressnestjsmiddleware

Passing boolean data from JQuery to PHP can be done by sending the data

When using ajax to send data from jquery to php, I am encountering an issue where Boolean data sent through jquery is received by php as a string. However, I want the Boolean data to be recognized as Boolean on the php end. Below is the code snippet: $.a ...

phpjqueryajax

Attempting to get the boxes in the final row to show up

Exploring new territories in web design, I'm currently working on achieving the layout shown below: Box Layout I've encountered an issue where the last row of 4 boxes in the middle section is not appearing as intended. Once this row is successfu ...

htmlcss

prepend a string to the start of ng-model

I am looking to enhance my ng-model variable by adding a specific string to it. This ng-model is being used for filtering data, specifically for elements that begin with the term "template". By adding this string to the ng-model, I hope to improve my searc ...

htmlangularjsangular-ngmodel

Utilizing the Flatpickr's onChange event to dynamically update the end date

I am utilizing two date pickers, start_time and end_time, both implemented with the flatpickr() function. When a date is selected for the start_time, I want the end_time to automatically update to match that value. To achieve this functionality, I am atte ...

javascriptruby-on-railsflatpickr

Running function without the need to click on 'li' element

In the process of developing a simple guessing game, my aim is to allow users to click on a number and have that number stored as userAnswer, while the computerAnswer is a randomly generated number between one and ten. Despite setting the setVariables() f ...

javascriptjqueryoop