The main menu items in jQuery do not display the child sub menu upon clicking

I'm currently in the process of creating a unique mobile menu for my Wordpress website, but I'm facing some challenges when it comes to displaying and hiding the sub-menu items. I've assigned the class name .menu-item-has-children as my selector, and I'm focusing on toggling the child classes .sub-menu.

The main issue I'm encountering is that the sub-menus only close when they are visible, and they don't reopen upon clicking the parent element again.

To see an example, visit this link (use the inspector to view the mobile menu under 1200px):

What could be causing this problem?

$('.menu-item-has-children').on('click', function() {
  var submenu = $(this).children('.sub-menu');
  if ($(submenu).is(':hidden')) {
    $(submenu).slideDown(200);
  } else {
    $(submenu).slideUp(200);
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu-main-menu-container">
  <ul id="menu-main-menu" class="menu">
   // Menu item details here ...
  </ul>
</div>

jqueryhtmlcsswordpressjquery-mobile

Answer №1

Upon reviewing your website, I noticed that for the mobile version (<1200 px), you have links for parent menus that redirect to respective pages after clicking on them. To achieve this functionality in your Javascript code, consider implementing the following:

$('.menu-item-has-children').on('click', function(e) {
  e.preventDefault();
  var submenu = $(this).children('.sub-menu');
  if ($(submenu).is(':hidden')) {
    $(submenu).slideDown(200);
  } else {
    $(submenu).slideUp(200);
  }
});

I hope this suggestion proves helpful to you.

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

How can PHP Ajax be used to determine when a modal should pop up?

Is there a way to automatically display a modal without refreshing the page? Currently, I have a button that submits to home.php and triggers the modal, but it requires a page refresh for the modal to appear. I'm looking for a solution that will eith ...

javascriptphpjquerymysqlajax

Ways to hide a div element when the size of the window is decreased

I need help with keeping my logo fixed on the header of my website. You can view an example of the issue here: Currently, when the window is resized to a certain height, the logo (The sun) changes position. How can I ensure that it remains fixed in place? ...

htmlcssfixedgraphical-logo

Using jQuery ajax and PHP to add information to a MySQL database

I've been puzzling over how to use jQuery's ajax() function to post form data from a textarea to a mysql database. The problem is, I'm struggling to grasp the underlying concept. Imagine there's a form: <form method="post" action=" ...

phpjqueryajax

What could be causing appendChild to malfunction?

I'm having an issue trying to create three elements (parent and one child) where the third element, an <a> tag, is not appending to modalChild even though it's being created correctly. modal = document.createElem ...

javascripthtmlcss

The one-click button is functional on larger screens, while on mobile devices, only a double click will register

I am facing an issue in angular where a button works perfectly fine with one click on larger screens, such as Macbook. However, on iPhone, it requires a double click to function properly (it works fine on Android too). The alert triggers with a single cl ...

javascriptcssbuttononclickdouble-click

The Eclipse IDE is experiencing issues with the functionality of the JavaScript Number class

In my latest project, I decided to create a Dynamic Web Project using the Eclipse IDE 2019-12 along with Apache Tomcat 8.5.55 server. The main functionality of this project is that a user can input integers and receive their sum as an output. To ensure dat ...

javascripthtmleclipse

Is there a way to seamlessly integrate typeahead.js with jquery.validate?

Currently, I have a website built on ASP.NET MVC 5 which utilizes jQuery validation (specifically 'jquery.validate.js' in the MVC project template). My goal is to implement type-ahead functionality using 'typeahead.js' on an input field ...

javascriptjqueryjquery-validatetypeahead.js

While working with ajax form submission in CodeIgniter, I encountered an issue where I did not receive the expected value in the

For my project, I am using PHP Codeigniter and submitting a form through an Ajax call. However, I am facing an issue where I am not receiving the expected value in the success message. Below is the code snippet: Ajax Call: function addLocation(){ va ...

phpjqueryajaxcodeigniter

My Drop Down menu is not displaying the <a> in two lines, and I'm having trouble getting it to show correctly

Hello there! I've encountered an issue with my drop-down menu. The text within the <a> tags is too long to fit on a single line, and I'm struggling to make it display in two lines instead. I've been experimenting for the past couple o ...

htmlcss

Guide to clearing input fields and displaying an error message through Ajax when the requested data is not found within a MySQL database

I am looking for a way to clear the textboxes and display an alert message if the data is not found in the MySQL table. I encountered an issue when using type: 'json' as removing it makes the alert work, but then the data from the MySQL table doe ...

javascriptphpjquerymysqlajax

Highcharts - Troubleshooting the chart reflow feature

Take a look at the fiddle I created. I encountered an issue with the chart width when toggling the sidebar. After seeking help on Stack Overflow from this post, I was able to solve it. Now, I'm facing another bug where adding transitions while togg ...

javascriptjqueryhtmlcsshighcharts

Restrict Scrolling on Login Page

I am experiencing an issue where my login screen does not scroll on PC, but when accessed on mobile, it starts to scroll. I have tried implementing various solutions recommended in other threads on this platform, but unfortunately, nothing seems to be work ...

htmlscrollscrollbar

What could be causing my JavaScript pricing calculator to malfunction?

I've been struggling to make the script below work, but I can't seem to figure out why. It should be functioning properly. Even though all variables are in place, no price is appearing? You can view the HTML on this page: var cake_prices = n ...

javascripthtml

Generate an array in JavaScript using the values from input fields

Is there a way to create a JavaScript array that stores the values of all input fields with the class 'agency_field', when there are x number of these fields in the form? I attempted to achieve this using jQuery, but encountered a syntax error. ...

javascriptjquery

How to style FullCalendar to apply background-color for the entire day, not just the event using the 'addEventSource' method

Is it possible to add a background color for the entire day, rather than just for the event itself? The code I've written currently only displays the events with a background color. <script> $(document).ready(function() { $.ajax({ u ...

cssjsoncodeigniterfullcalendar

Tips for maintaining grid width when columns are rearranged in the column menu

Is it possible to stop jqgrid from changing its width to full screen after column selection? I attempted the code below, following guidance from How to change column name in column chooser pop up in jqgrid? My aim was to create a column switcher function ...

jqueryhtmlcssjqgridfree-jqgrid

Working with CodeIgniter and extracting data using an AJAX request

I've been experimenting with this code for a while now and I haven't been able to get it to work. I am working with CodeIgniter framework and when I click the button $('.galName').click(initUpdate);, it calls the following function: fu ...

phpajaxcodeigniterjquery

It's impossible to remove a dynamically added class from a button

I'm facing an issue with adding and removing classes from a button using jQuery. I added a new class to the button, then removed it, but now when I click the button again I want to revert back to the initial class. Unfortunately, my code is not workin ...

javascriptjquery

What happens when a browser can support multiple versions of a font - which one does it choose

If I have two versions of a font, customFont1.woff2 and customFont1.woff, and I list the woff2 version first followed by the woff version in the font declaration file, what happens when the browser supports both formats? Will it download both fonts or ju ...

htmlcssfontsfont-face

Script causing issue with webservice communication

My webservice seems to be malfunctioning. Here is the script that I am using: <script src="Scripts/jquery-1.11.1.min.js"></script> <script> $(document).ready(function () { $('#btn').click(function () { ...

c#jqueryasp.netajaxweb-services