Enhance jQuery for a dynamic navigation dropdown with multiple sub-menus

Looking for help with a jQuery script as I am a beginner in using jQuery.

jQuery(document).ready(function ($) {
$(".sub-menu").hide();
$(".current_page_item .sub-menu").slideDown(200);;
$("li.menu-item").click(function () { 
    if ($('.sub-menu', this).length >=1) {
        event.preventDefault();
    }
    $(".sub-menu").slideUp(200);; 
    $(this).find(".sub-menu").slideDown(200);;
    event.stopPropagation();
});
});

The current script is running smoothly but now I wish to extend it to the third level. For example:

Page 1 ------> Page 1 Second Level -----------> Page 1 Third Level.

At present, the second and third levels show up when clicking on the first-level menu. However, the third level should only be visible if the 'Second Level Page 1' is clicked.

Can anyone offer assistance?

Thanks in advance, Thorsten

EDIT Seeking advice on why the script isn’t functioning properly on Firefox?

After clicking, Firebug reports: ReferenceError: event is not defined nav.js:7:5

javascriptjquerycssmenunavigation

Answer №1

Here is an alternative approach to try:

jQuery(document).ready(function($) {
  $(".current_page_item").children(".sub-menu").slideDown(200);
  $("li.menu-item").click(function() {
    $(this).parent('ul').find(".sub-menu").slideUp(200);
    if ($('.sub-menu', this).length >=1) {
      event.preventDefault();
    }
    $(this).children(".sub-menu").slideDown(200);
    event.stopPropagation();
  });
});

You can test this code in action on jsfiddle

Note that in the fiddle example, I did not add the "menu-item" class to li elements.

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

Utilizing the output from a console.log in a webpage

Although the function I created is functioning properly and successfully outputs the value to my terminal onSubmit, I am facing difficulty in understanding why this code isn't updating my html. router.post('/index', function(req, res, next) ...

javascriptjquerynode.jsexpress

CSS not reflecting changes after the href of the <link> tag has been updated

Hey there, I'm a beginner in the world of programming and currently facing an issue that I need help with. My goal is to dynamically update the CSS of my webpage by using JQuery to change the 'href' value in the link tag. In order to test t ...

javascriptjqueryhtmlcssless

Unable to showcase information in a jQuery UI popup through AJAX when initially presented

I'm trying to display reviews from my database on a jQuery UI dialog box upon loading, but nothing is showing up. Here are the reviews: {"results":[{"review_text":"good"},{"review_text":"not bad"},{"review_text":"great"}]} Can someone please check m ...

javascriptjqueryajaxjsonjquery-ui

Updating open graph meta tags using jQuery

I need assistance tweaking my code to dynamically modify the <meta property="og:title" content="CHANGE_ME"> tag when sharing a page containing an embedded video. While swapping the <h1> and <title> elements is functioning as intended, I& ...

jqueryfacebook-graph-api

How to display images conditionally on the server side using Next.js

I think I may have the answer already, but I thought I'd check if anyone has a different solution. I'm working on a hero banner with one image for mobile and a different one for desktop display. Normally, I would use conditional rendering, but ...

javascriptreactjsnext.jsserver-side-rendering

The charAt function in a basic JavaScript if statement is failing to execute

When a user inputs a number that does not start with 6 or 9, an error occurs: console.log($(this).val().charAt(0)); if($(this).val().charAt(0) != 6 || $(this).val().charAt(0) != 9){ x=false; }else { x=true; } The console.log function corre ...

javascriptjquery

Can you provide guidance on how to zoom in on the Jquery Portlet when clicking the "zoom-in" icon?

After thorough research in various forums, I have not come across any relevant post addressing my specific issue. Therefore, I am reaching out for assistance. I currently have four Jquery Portlets on my page. My goal is to enable a zoom-in feature on o ...

jqueryjquery-uijquery-plugins

Having trouble transmitting parameters through ajax

I have been attempting to use ajax to send variables to a php page and then display them in a div, but unfortunately, it's not functioning as expected. Below is the HTML code: <div id="center"> <form> ...

javascripthtmlajax

The Angular overlay is concealed beneath the pinned header

I am seeking a solution to have a mat-spinner displayed on top of my app while it is in the loading state. Currently, I am using an overlay component with Overlay from @angular/cdk/overlay. The issue arises when part of the spinner that should be overlai ...

htmlcssangular

list without specific order spacing

I have implemented an unordered list in the footer section of my HTML document. Within this list, the first two items consist of social media logos displayed as images. To enhance their visibility and prominence within the footer, I have assigned them a wh ...

htmlcsspaddingmarginhtml-lists

Calculating the average value of an attribute in an array using Mongodb (Mongoose)

Seeking assistance with a query to find sellers near users based on location input and sorting them by average rating. Is this achievable? Snippet of the model including an array of reviews: const sellerSchema = new mongoose.Schema({ _id: Mongo ...

javascriptmongodbexpressmongoosemongodb-query

Having trouble transferring file object from reactjs to nodejs

Hey there! I am relatively new to nodejs and React, and currently, I'm working on a project that involves sending a selected file from the front end (React) to the back end (Node). The goal is to upload the file and convert it into a JSON object. Howe ...

javascriptnode.jsreactjsexpressaxios

Error: An unidentified identifier was encountered within the ajax handler

I'm encountering an error with the following code snippet: var request = { action: "coupg_subscribe_affiliate", email: $('#affiliate_signup_email').val() } $.ajax({ type: "post", dataType: "json", url: coupg_ajax_obje ...

jqueryajax

What is the best way to display a jQuery UI dialog when the page is reloaded?

I am trying to display a jQuery UI dialog when the user tries to reload or close the browser. Here is my code snippet: $(window).bind('beforeunload', function () { $("#confirm").dialog({ width: 500, modal: true, buttons: { ...

javascriptjquery

Are you familiar with the Pagination and Card Components offered by Ant Design (antd)?

Can you merge the Pagination feature from antd with Card components to create a layout resembling Pinterest, complete with pagination? The standard Pagination code from https://ant.design/components/pagination/: import { Pagination } from 'antd&apo ...

javascriptreactjspinterestantd

Incorporate a span element within the PHP code located in the final div

Having trouble with adding a span in PHP The last div is not functioning correctly. **In need of help on how to insert a span within PHP code.** echo" <tr> <td>$id</td> <td>$name</td> <td>$la ...

phphtmlcss

Configuring the remote source for autocomplete suggestions

Similar Issue: Error with jquery autocomplete this.source function I am facing an issue with my autocomplete feature where I am trying to connect it with my API to retrieve customer account numbers. The problem arises when the API response includes mu ...

jqueryjquery-ui

Can you explain the process of utilizing a JavaScript function that has been fetched via Ajax

When the AJAX function is loaded on the page, I am attempting to execute another function. The code snippet for the AJAX call: $.ajax({ type: "POST", url: "loginpersonal.asp", data: "id=<%=request("id")%>", beforeSend: function() { $("#personal ...

javascriptajax

Creating a User Registration and Authentication System with JavaScript for a Database

I'm new to the world of web development and I've encountered a bit of a challenge. I'm looking for a Javascript framework that can handle user registration and authentication with a database, similar to what I would do with PHP and MySql. I ...

javascriptpythonruby-on-railsangularjsnode.js

Create a bookmarklet for Webdriver when initializing the driver, or store the bookmarklet in your saved bookmarks, all done without the need to

Need Help Adding Custom Bookmarklet to Webdriver I am looking for a way to include a custom bookmarklet (a bookmark that consists of pure JavaScript code) in a webdriver so it appears on the bookmarks toolbar. I would like to achieve this either during th ...

javascriptpythonseleniumgoogle-chromebookmarklet