Parent menu fails to trigger the opening of child menu upon clicking

I'm struggling to modify a Wordpress theme to enable the child menus to expand when clicking on the parent menus. Is there a way to edit this code to make that functionality work?

// Implement expandable menus
var expand_link = $('<a class="menu-expand"><span class="screen-reader-text">' + js_i18n.next + '</span></a>');
var back_link = $('<li><a class="menu-back">' + js_i18n.back + '</a></li>');

$('.menu ul.menu-wrap').data('depth', 0);
$('.menu li.menu-item-has-children > a').after(expand_link);
$('.menu .sub-menu').prepend(back_link);
$('.menu .sub-menu').hide();

$('a.menu-back').click(function () {
    var parent_ul = $(this).closest('ul');
    menu_level_down(parent_ul);
    return false;
});

$('.menu-item-has-children a:not([href], .menu-back)').click(function () {
    var parent_ul = $(this).parent().find('ul:first');
    menu_level_up(parent_ul);
    return false;
});


function menu_level_up(parent_ul) {

    var depth = $('.menu ul.menu-wrap').data('depth');
    var old_depth = depth;
    var new_depth = depth + 1;

    parent_ul.show();

    $('.menu ul.menu-wrap').data('depth', new_depth)
        .addClass('depth-' + new_depth)
        .removeClass('depth-' + old_depth);

}


function menu_level_down(parent_ul) {

    var depth = $('.menu ul').data('depth');
    var old_depth = depth;
    var new_depth = depth - 1;

    parent_ul.hide(250);

    if (new_depth <= 0) {
        new_depth = 0;
    }

    $('.menu ul.menu-wrap').data('depth', new_depth)
        .addClass('depth-' + new_depth)
        .removeClass('depth-' + old_depth);

}

Answer №1

If you want to streamline the process of adding events to your WordPress website menus, you don't need to write extensive code. Instead, you can easily access the menus and incorporate click events using JavaScript. Take a look at the following JavaScript snippet:

jQuery('YOUR_MENU_CLASS li.menu-item-has-children > a').after('<span class="sub-menu"></span>');
var menuBtns = jQuery('.sub-menu');
jQuery(menuBtns).on('click', function(e) {
    e.stopPropagation();
    var el = jQuery(this).siblings('ul');
    var tl = jQuery(this);
    jQuery('YOUR_MENU_CLASS li ul').not(el).hide();
    el.stop(true, true).toggle(400);
});

With this JavaScript code, you can efficiently manage sub-menus regardless of their depth.

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

Issues arise when the elements <html> and <body> fail to adhere to a 100

Lately, I've been struggling with various problems related to heights. I was able to resolve the height issues of certain elements using flex:auto and flex-shrink:0. However, I'm facing difficulties getting the HTML and Body tags to cooperate ( ...

Is the detailedDescription missing from the JSON-LD schema crawl?

I am currently utilizing the Google Knowledge Graph Search (kgsearch) API to retrieve Schemas from schema.org. However, I am encountering an issue where some nested elements are not being recognized as JSON or I may be overlooking something... url = "http ...

Having trouble setting a background image for my CSS button

Recently started experimenting with button styles and I wanted to create a design where there is a background image on the left of the button with text located on the right side of the image. Here's the code snippet I've been working on. Here&apo ...

In a particular website, the custom post type in WordPress is not appearing in the left menu bar

Recently, I encountered an issue with a plugin I developed. It seems to be working fine for most users, but one person reported a strange problem. They mentioned that the custom post menu was not showing up for them, even though it appeared on my test site ...

Boost Page Speed with Angular

Currently, I am working on a project using Angular and encountered an issue with testing the page speed on GTmetrix. Despite generating the build with the command ng build --prod--aot, the file size is 1.9mb, leading to a low speed in GTmetrix's analy ...

Flexbox - Consistent height image columns

I'm working on a basic flexbox layout that looks something like this: html,body { margin:0; padding:0; } body { height:100%; width:100%; } .panel-grid { -webkit-align-items: flex-start; ...

A mistake has been identified: The object could potentially be 'null'. TS2531 for window.document

This is my first time integrating TypeScript into my project. When attempting to access something using window.document.getElementById(), I keep encountering the error: Type error: Object is possibly 'null'. TS2531 I've looked online for ...

Tips for confining a float within a div with fluctuating space

I have a scenario where I have multiple divs ('group') containing text, and there is a floated div ('toggle') in the bottom corner. The current code works well if the text length in 'group' is consistent, but the position of t ...

The TypeScriptLab.ts file is generating an error message at line 23, character 28, where it is expecting a comma

I am attempting to convert a ts file to a js file. My goal is to enter some numbers into a textarea, and then calculate the average of those numbers. However, I encountered an error: TypeScriptLab.ts(23,28): error TS1005: ',' expected. I have in ...

Compiling this HTML template in dev mode with Vue is agonizingly slow

I've been working with a template app setup that was bootstrapped using vue CLI. Within one of my components, I have 20 nested div tags. During development mode, it's taking roughly 10 seconds to compile this component. The more deeply I nest HTM ...

I am interested in retrieving all users along with the places they have created using virtual population

const fetchAllUsers = async (request, response) => { try { await User.find({}).populate('place').exec(function(err, data) { console.log(data.places) console.log(data) res.json(&quo ...

Injecting CSS styles into a webpage using a Chrome extension before the page has completely loaded to achieve instant customization

As a newcomer to creating Chrome (or other browser) extensions, I am working on developing one that applies custom CSS rules to specific page elements. Overall, it seems to be functioning as intended, but with some minor issues. One issue I have encounter ...

Encountering 401 unauthorized error in Laravel Passport, Vue.js, and Axios integration

I am fairly new to VueJS and I am trying to retrieve data from a Laravel (passport) API. To do this, I have used npm i axios for making API requests. Below is the script code from my App.vue file: import axios from 'axios'; export default { da ...

Guide to setting the first tab as the default tab using Thymeleaf, Css, and Bootstrap

I am currently working on a project where I need to dynamically create tabs based on a list retrieved from my Spring backend using Thymleaf and Bootstrap. While I have managed to successfully create the tabs and content, I am facing an issue where the fi ...

Put Jest to the test by testing the appendFileSync function

I am currently working on creating a test for appendfilesync function. When using a logger, I noticed that one line of code is not covered in my tests. Below is the code snippet I am referring to (please note that I am using tslog for logging purposes): ex ...

Guide to recreating the Material Ripple effect using Vuejs

I am in the process of recreating the ripple effect inspired by Material Design for my current project. I have decided to move away from Quasar and build all the elements from scratch. Here is the effect: https://i.sstatic.net/VKJIc.gif I have seen some ...

Is it possible to simultaneously utilize a Node.js server and an ASP.NET web service?

Although I have experience in developing with .NET, I am new to Node.js and intrigued by its advantages. I believe it is a great way to maintain code and promote reusability. However, I am faced with a dilemma. I understand that Node.js allows for creatin ...

Is there a way to send a personalized reply from an XMLHttpRequest?

My goal is to extract symbol names from a stocks API and compare them with the symbol entered in an HTML input field. I am aiming to receive a simple boolean value indicating whether the symbol was found or not, which I have implemented within the request. ...

Javascript Error - Issue with Fuse.js: e.split() function is not recognized

Scenario - I am in need of implementing a fuzzy search feature, and therefore utilizing fuse.js for this purpose. I obtained the code snippet from fuzzy.min.js at https://github.com/krisk/Fuse/blob/master/src/fuse.min.js Challenge - Despite using the cod ...

Is it possible to implement a feature in Angular and Bootstrap where the toggle menu can be closed by clicking anywhere on the page, rather than just the toggle button

I'm working on an Angular project where I've implemented a navbar component. The navbar is responsive and includes a toggle button that appears when the browser window is resized. This button allows users to hide or display the menus. One issue ...