Is the navigation dropdown toggle triggered by both mouseout and when hovering off of it?

I'm looking for some assistance in modifying the code so that the dropdown menu not only hides on click, but also hides on mouseout and/or when another top-level menu button is hovered over.

View jsfiddle example

$(document).ready(function () {
    $("li").click(function () {
        $('li > ul').not($(this).children("ul").toggle()).hide();
    });
});

I am still learning jQuery/script coding and trying to improve my skills.

Just a heads up - I am using divs as part of the structure of the dropdown, so keep that in mind if replacing "ul" with a div.

Credit for the initial code goes to Pramod Sankar L (user PSL).

Any help or pointers would be greatly appreciated!

javascriptjquerycss

Answer №1

Explore

.mouseleave()

:has()

$(document).ready(function () {
    $("li:has(ul)").click(function () {
        $('li > ul').not($(this).children("ul").toggle()).hide();
    }).mouseleave(function () {
        $('li > ul').hide();
    });
});

$("li:has(ul)") identifies li elements that have ul inside

Fiddle Demo

Modified Following User's Feedback

$(document).ready(function () {
    $("#dropmenu li:has(div)").click(function () {
        $('#dropmenu li.second-level > #dropmenu li.second-level div.drop_6col-bottom').not($(this).children("#dropmenu li.second-level div.drop_6col-bottom").toggle()).hide();
    }).mouseleave(function () {
        $(this).children('div').hide();
    });
});

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

Transforming specific symbols (é è ë) with URL encoding

I am currently working on a JavaScript function that opens the user's email client with pre-filled content. However, I am facing difficulties in converting special characters so they display correctly in the email client (especially when passed throu ...

javascriptfunctionurlencode

combine ngClass properties if substitution is true

My directive includes replace: true in the definition. <my-custom-tag> </my-custom-tag> This is the template for the directive: <div data-ng-class="{'class1': condition1, 'class2': condition2}"> </div> When u ...

javascriptangularjsangularjs-directive

How can I make an image tag perfectly fit a CSS grid cell without using object-fit?

In this Vue component, the parent element displays 8 instances of these components in a 2x4 grid layout. The issue arises when the image within each component is larger than its container, causing it to not shrink to fit while maintaining the aspect ratio ...

htmlcssvue.js

The post processing effect in Three.js does not support FXAA when SSAO is activated

I am having trouble getting SSAO and FXAA effects to work together in this simple test scene. Enabling SSAO works fine, but when I also enable FXAA, the render turns black. In the provided fiddle, if you uncomment composer.addPass(FXAA_effect); you will s ...

javascriptthree.jspost-processingssaofxaa

Is it possible for JavaScript/React to observe the movement of elements on the webpage?

I'm searching for a solution to detect if an element moves on the screen. Currently, I have an absolute positioned div (acting as a download overlay) that appears when a document is clicked on my website. However, I want it to disappear whenever the d ...

javascriptreactjsdomeventslistener

What is the best way to include an ajax request within a function and execute it only when needed?

I am working on an ajax request that fetches data from a specific URL. I have the following code snippet: $.ajax({ type: 'POST', url: '/get-result.php', dataType: 'json', data: 'pid=' + $(this).attr( ...

javascriptjqueryajax

Issue with Cascading Dropdowns in jQuery

I am currently experiencing issues with a piece of code on my website (also accessible via this link). The code consists of 2 select fields that should display different data based on the selection made. However, I have identified 2 bugs within the code. ...

javascriptjqueryhtml

What is the best way to extract specific values from one JSON object and transfer them to another using lodash?

//I have a pair of objects var obj1={ "name":"mayur", "age":23 } var obj2={ "name":"keyur", "age":29, "limit":54, "surname":"godhani" } //I am familiar with one approach var j1 = {name: 'Varun', age: 24}; var j2 = {code: &ap ...

javascript

The elements at the bottom of the Google homepage do not stay in place when hovering

I'm facing an issue and seeking guidance on how to make the footer and 'Google in different languages' fixed when hovering over the buttons. I'm attempting to create this on my own without referencing the Google homepage code in Chrome ...

htmlcss

What is the best way to save a large array to a .txt file in node.js?

It seems that using fs.writeFile is the obvious solution. However, after reading the response to this question, it appears that a Stream technique might be more appropriate. In an attempt to delete a line from a text file by converting it to an array, I ...

javascriptarraysnode.jstextfile-io

When working with Nuxt 3, the referrer header may sometimes return as undefined

I am looking to capture the referrer header and store it in a cookie so that I can later use it to populate an axios request during the user's journey on my website. In my app.vue, I currently have the following code snippet: const headers = useReque ...

javascriptvue.jsnuxt.jsvuejs3nuxtjs3

Disable the use of componentWillUnmount in case of an incomplete form

I have implemented a form using redux-form and I am trying to set up a scenario where if any of the form's inputs have content and the user tries to navigate away from the page, a prompt should appear. My goal is to prevent the page from being unmoun ...

javascriptreactjsreduxredux-form

Having trouble with jQuery dialog popups not appearing as expected? Instead of popping up as intended, do they simply show up on the page

I am having some trouble with a few small divs that are supposed to pop up when a certain event occurs. However, instead of popping up, they are appearing within the content of the page. Does anyone have any insights into why this might be happening? Addi ...

jquery

Using react-input-mask together with a child component in React is not compatible

I've been exploring ways to mask a Material UI TextField, and after researching some solutions online, I came across this code snippet: <InputMask mask="(0)999 999 99 99" value={phone} disabled={false} ...

javascriptreactjsmaterial-ui

What is the best way to incorporate a block of code every time my while loop retrieves data from the database?

I have a table in my database where I fetch data using a while loop and create HTML div elements. The reason I used LIMIT 10 is because the posts in the table will keep changing due to users continuously adding new entries. $get_ids=mysql_query("SELECT * ...

phpjqueryajax

Shifting and implementing various styles across numerous elements at the same time

There is an anchor tag containing two spans... <a class="banner-logo" href="/search"><span id="banner-logo-hello">Hello</span><span id="banner-logo-world">World</span></a> When hovering over the anchor tag, I want to c ...

css

Adjusting the size of content with CSS

I've been attempting to get an image to cover the entire screen on a device using CSS, but so far I haven't had any success. The image is within an :after pseudo element and content tag. Since it needs to be laid over the HTML, I can't use t ...

htmlcss

Step-by-step guide on how to change the appearance of a <DIV> using data from a database (JSON

After retrieving data from a database as a JSON file, I have written code to loop through an item (portOn) and determine if certain ports are present in the array. If a port is found in the array, its corresponding variable is set to true. var portG01,port ...

javascriptreactjs

Steps to display JSONP response delivered by PHP on a web page

I've written a JSONP script as shown below: <script> $(document).ready(function(){ $("#LoginForm").submit(function(){ var data = $(this).serialize(); //alert(data); $.ajax({ type:"POST", dataType:"jsonp ...

phpjqueryjsonajaxjsonp

What is the best way to perform a keyword search in AngularJS?

My data consists of code:description pairs (e.g. cmsc100: Web Programming). I have a search box where users can enter either the code or description. Upon clicking the button, the program should display the data that matches the entered code/description or ...

javascriptangularjs