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

accurate JSONP reply

Currently, I am experimenting with JSONP locally to receive a correct response and pass it into my callback function jsonp_callback. I am referencing code from: How do I set up JSONP? header('content-type: application/json; charset=utf-8'); $dat ...

javascriptjqueryajaxjsonp

Searching and categorizing information within a table using jQuery

Can someone help me with merging my html and jquery code for type and filter table data, as well as tag data in the same input box? I have the code for both functionalities separately (http://jsfiddle.net/tutorialdrive/YM488/), but I want to combine them. ...

jqueryhtmljquery-uitags

How can I upload an image file using VueJS and Django Rest Framework?

Hello, I am currently in the process of editing a blog page using VueJS and Django Rest Framework. However, I am facing an issue when trying to upload a photo - I keep receiving an error message stating that "the sent data is not a file." Additionally, I a ...

javascriptdjangovue.jsdjango-rest-frameworkaxios

Smooth scrolling on a single hash anchor to reach the top using jQuery

I have implemented a jQuery smooth scroll function in my code: $('a[href*=#]').on('click',function(event){ //event.preventDefault(); // not required $('html,body').animate({scrollTop:$(this.hash).offset().top},500); }); It ...

jqueryscroll

Creating a Loopback API that seamlessly integrates with Ember.js

Exploring the use of Loopback to create an API that communicates with Ember. Ember expects JSON data to be enclosed in 'keys', such as for an account: { account: { domain: 'domain.com', subdomain: 'test', title: ...

javascriptnode.jsember.jsloopbackjs

php failure to execute included file

Hey there! I'm currently facing an issue with including a file that contains all of my 'head' information. My goal is to simplify and streamline my page by breaking it down. In my index.php file, here's what I did: <?php include & ...

phpjavascriptcssfileinclude

Having trouble passing a value to a function using jQuery?

I'm facing a challenge with sending data to a function upon changing the default value of an input field. function updatePosition(currentPos, newPos) { $.post(iloc, {a:"change_pos", position:currentPos, new_pos:newPos}, function(data){ wi ...

jquery

"Modify marker icon upon click event in Google Maps by utilizing the loadGeoJson function

I have successfully loaded the markers from a json file using loadGeoJson. While I am able to SET the marker icon/img on load, I am unsure of how to CHANGE it upon click. Is there a way to target the clicked marker and perform a setIcon or similar action ...

javascriptgoogle-mapsgoogle-maps-api-3clickicons

JavaScript has encountered a syntax error

When working on an animation in javascript, I encountered a problem that I can't seem to identify. I am attempting to make the pan function work with the "mover" function, but it seems like either I am not using the properties correctly within the "tr ...

javascriptcssanimationzoomingpan

Tips for transferring information from ng-view to the navbar on the index.html page using AngularJS

Recently, I embarked on a journey to learn the MEAN stack and decided to challenge myself by building an authentication page from scratch instead of using the out-of-the-box solution. My main struggle lies in updating texts on my navbar. Here's a snip ...

javascripthtmlangularjstwitter-bootstrapmean-stack

Struggling to access values from your model using EL in JavaScript? Let me provide some guidance

In my model, there is an object named "domain" with two methods: getDescriptionEn() and getDescriptionFr(). I am trying to retrieve the appropriate description based on the current locale. My issue lies in the following code snippet: var locale = "${cur ...

javajavascriptjspel

Troubleshooting jQuery's issue with dynamically adding input fields

I came across a tutorial (which I tweaked slightly) on this website: code In JSFiddle, everything works perfectly fine with the code. However, when I implemented it on my actual page, it's not functioning as expected. I've been trying to trouble ...

javascriptjqueryhtml

Removing border of the top and bottom of jspdf pages

In my project, I am utilizing a combination of html2canvas, canvg, and jspdf to convert HTML content (which includes SVG graphs) into canvases for the purpose of creating a PDF file. To address some page-break issues, I have resorted to creating multiple c ...

javascriptcsshtml5-canvasjspdfhtml2canvas

Unable to halt animation at the final frame

I'm attempting to implement a character jumping animation that should stop on the last frame, but it's not working as expected. I have tried using animation-fill-mode: forwards; but it didn't produce the desired outcome. Below is the c ...

cssanimationkeyframe

Tried to enroll the RCTBridgeModule category as RCTFileReaderModule

Trying to register the RCTBridgeModule class RCTFileReaderModule with the name 'FileReaderModule' failed because the name was already taken by the FileReaderModule class. This issue arises when attempting to launch an application on iOS using th ...

javascriptiosreact-native

Top technique for verifying the presence of duplicates within an array of objects

How can I efficiently check for duplicates in typescript within a large array of objects and return true or false based on the results? let testArray: { id: number, name: string }[] = [ { "id": 0, "name": "name1" }, ...

javascriptangulartypescript

Can you please guide me on how to convert pug (jade) to html using npm scripts?

Struggling to construct my package.json file, I find myself facing a challenge when it comes to writing scripts. "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build-css":"node-sass --output-style compressed -o bu ...

javascriptnode.jsnpmpug

"Pairing div/span elements with sprites for improved web

I've been updating my website by replacing most inline images with sprites. Here's a basic CSS code snippet for the sprite class: .sprite{ background-image:url(...); background-position:...; width: 16px; height:16px; } After learning that nest ...

csshtml

When an li element is styled with a width of 50% and floated to the left, it does not display the bullet points

When attempting to create a 2-column list, I implemented the following CSS: ul { overflow: hidden; } ul li { float: left; width: 50%; } However, I noticed that when I have 2 items in the list, the one on the right displays a list bullet while th ...

htmlcss

What causes Jest to throw ReferenceErrors?

Question Does anyone know why I am encountering this error? ● Test suite failed to run ReferenceError: Cannot access 'mockResponseData' before initialization > 1 | const axios = require('axios'); ...

javascriptnode.jsecmascript-6jestjs