Display sub navigation when clicked in WordPress

I currently have the default wordpress menu setup to display sub navigation links on hover, but I am interested in changing it so that the sub navigation only appears when the user clicks on the parent link. You can view my menu here https://jsfiddle.net/foley13/83sk1p1x/

Despite having some javascript code in place to achieve this functionality, it is not working as expected.

$(function(){
   //Hide all the sub menus
   $('.sub-menu').hide();

   $("li:has(ul)").click(function(){
      //Locate the child ul and toggle sliding
      $(this).children("ul").slideToggle('fast');
      $(this).toggleClass("down");
   });
});

I suspect that CSS may be interfering with the implementation of this feature, however, I simply want to eliminate the hover effect and solely rely on click events.

javascriptjquerycsswordpress

Answer №1

If you're encountering issues with li:has(ul), simply assign the "dropdown" class to those specific li elements that contain dropdowns. Problem solved! ;)

Answer №2

After experimenting with different versions of the code, I finally found a solution that works for me. To implement this solution, jQuery needs to be enabled in jsFiddle first.

Visit this link to view the working code on jsFiddle

(function(){
   //Hide all the sub menus

   $('li.menu-item-has-children').hover(function(){
    $('li.menu-item-has-children').children("ul.sub-menu").css({"display":"none"});
    return;
   });

   $("li.menu-item-has-children").click(function(e){
        e.preventDefault();
      //Find the child ul and slideToggle
      $(this).children("ul").slideToggle('fast');
      $(this).toggleClass("down");
   });
})();

For implementing this code in WordPress (which has conflicts with jquery's $), you will need to adjust the function like so:

(function($){ ...
  // Adjusted code here
}(jQuery);

Answer №3

Give this a try!

Snippet

$(function(){
   $("li:has(ul)").click(function(){
      $(this).toggleClass("hover");
   });
});

Don't forget to update the css by replacing :hover with .hover View live demo here

Answer №4

Thank you for your assistance, I was able to address my problem by retaining my original script:

$(function(){
   //Hiding all sub-menus
   $('.sub-menu').hide();

   $("li:has(ul)").click(function(){
      //Finding the child ul and toggling slide
      $(this).children("ul").slideToggle('fast');
      $(this).toggleClass("down");
   });
});

However, I removed the left: -999em; from both .sub-menu and .sub-menu ul, which resolved the hover issue.

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

Error encountered: Exceeded maximum update depth in Material UI Data Grid

Encountering an error or warning when inputting rows in the table that is causing the screen to freeze. Warning: Maximum update depth exceeded. This issue can arise when a component triggers setState within useEffect, but useEffect doesn't have a de ...

javascriptmaterial-ui

Issues arise when submitting the form on a web page with an MVC 4 partial view, causing the page

Scenario: I am currently working on a C#/MVC 4 project where I have a view that includes a partial view. The main view consists of a form with a submit button, and the partial view is initially hidden but can be displayed by selecting a checkbox. Problem: ...

c#javascriptjqueryasp.net-mvcasp.net-mvc-4

"Adding dots" in a slideshow using HTML, CSS, and JS

I'm currently working on a slideshow that includes navigation dots at the bottom. Although the slideshow is functioning properly, I am encountering an issue where only one dot appears instead of the intended three in a row. Despite my research and att ...

javascripthtmlcssslideshow

Securing some room beneath the table

I need some extra room below my table. <table border="0" class="medtable"> <tr> <th>User</th> <th>From</th> <th>To</th> </tr> <tr> ... </tr> ...

csshtml-table

Two pictures, one adjusting in size and one staying the same size

I am working on a design with an 800px wide div that contains side-by-side images - one photo and one map. The challenge I am facing is that the map, which is 300px in width and has intricate details, becomes unusable when resized for smaller screens. I wa ...

htmlcssresponsive-designimage-resizing

The issue at hand in Ionic 2 / Angular 2 is that the NPM module is being utilized as a value instead of referring to a type

I'm currently working on integrating the npm module "ajv" into my Ionic 2 (Angular 2) project. You can find more information about this module at . After running "npm install ajv --save", I proceeded to make some modifications to my app.modules.js fi ...

javascriptangularnpmionic2

Chrome's Tab key causing unremovable black border [2022]

Is there a way to change the color of the black box shadow to a different hue when switching between nav tabs using the Tab key? Here is the code snippet: <ul class="nav nav-tabs m-5"> <li class="nav-item"> <a clas ...

cssfrontendbootstrap-5

The server returned a 500 Error when attempting to send a JSON object to an .ASMX

Short and sweet question: Why do I get a 500 error when passing a JSON object to an ASMX webservice? If I define the params as individual variables (e.g. int ID, int OrderHeaderID), I don't encounter the error. I'm puzzled because I've succe ...

jqueryajaxjsonweb-servicesasmx

Privacy protection feature in Firefox is preventing data from being pushed to Google Tag Manager's Datalayer

Recently, I discovered that the conversion tracking in Google Analytics for a website we developed and maintain has been inaccurate by 20% - 40% daily. After testing in various browsers except Firefox, conversions are reflected in Analytics immediately wi ...

javascriptwordpressfirefoxcorsgoogle-datalayer

Modify the URL of the button based on the chosen option

How can I dynamically change the URL of a button based on the selected option? For example, if someone selects "center", the button URL will be changed to "center.html". I have come across some examples that use the value in the option field. I have trie ...

jqueryhtml

Looping through alert items

Below is the code snippet I am working with: <tr ng-repeat="sce in users"> <td> <a href="/test/delete?id={{sce.id}}" onclick="return confirm('You really want to delete'+ {{sce.name}} + 'from list');" > ...

javascriptangularjs

Utilize jQuery to swiftly align elements within a designated container

Check out my JSFiddle example: http://jsfiddle.net/c62rsff3/ I'm attempting to implement snapping behavior between 2 elements using this code: $('.draggable-elements').draggable({ snap: true }); In addition, I've defined a container ...

javascriptjqueryhtmlcssjquery-ui

Tips for creating <table> HTML code without relying on JSF tag libraries like h:datatable or ui:repeat, while still utilizing JSF for managing page navigation

I am facing a challenge with rendering tables in my application. The tables have 12 columns and up to 1800 rows, taking 8 seconds to display using h:dataTable in JSF. I attempted using ui:repeat with a Java List object in JSF for row data retrieval, which ...

ajaxperformancejsfjquerydatatable

What is the importance of cloning React state before making changes or while working on it?

Someone advised me to always create a clone or copy of the react state before making any changes to it. const newState = [...this.state] newState.name = 'hardik' I'm still unsure about the reason behind this recommendation. Why shouldn&apos ...

javascriptreactjs

I am encountering an issue where I am unable to send a HashMap String to a PHP server, and I am not receiving a JSONArray in the

How can I send a hashmap string to a PHP server without receiving back a JsonArray using Volley in Android? CM =$_POST['code_send']; $db =Db::getInstance(); $records = $db->query ("SELECT * FROM p_users WHERE c_meli='$CM'"); $js ...

javascriptphpandroidjson

What is the reason that utilizing $("input").first() does not function properly on Google Forms?

While practicing with Selenium, I encountered an issue while using this Google form. Specifically, I found that I couldn't select the first input field by using $("input").first() To confirm this issue, I turned to the web browser (Firefox) console t ...

javascriptjqueryseleniumgoogle-forms

Updating a component (`AddBudgetModal`) while rendering a different component (`App`) is not possible. To identify the incorrect setState() call within the `AddBudgetModal` component

Here is the code snippet from App.jsx I'm facing an issue on line 44 where I'm attempting to open an addbudgetmodal by passing true or false. However, I'm getting an error message that says "Cannot update a component (App) while rendering a ...

javascriptreactjsreduxstatesetstate

Error loading CSS file on Google App Engine

I attempted to add a CSS file as a static file in my project just to experiment with how it functions, but encountered difficulties right from the start. The content of the CSS file is: body { background:#00FF00; } In addition, here is my configurat ...

htmlcssgoogle-app-engine

Is tsconfig.json Utilized by Gatsby When Using Typescript?

Many blog posts and the example on Gatsby JS's website demonstrate the use of a tsconfig.json file alongside the gatsby-plugin-typescript for TypeScript support in Gatsby. However, it seems like the tsconfig.json file is not actually utilized for conf ...

javascripttypescriptbabeljsgatsbytsconfig

What is the most effective method for organizing an object by its values using multiple keys?

I'm interested in utilizing the sort method mentioned in the link but I am facing { "CYLINDER": 2986, "HYDRAULIC": 1421, "JACKS": 84, "INSTALLATION": 119, "REAR": 61, "JACK": 334, "TUBE": 1, "FEED": 114, "ASSEMBLY": 326, "DCS": 2 ...

javascriptarrayssortingobject