How to automatically close the menu on a Wordpress theme after clicking a link

I am currently using a Wordpress theme named ichiban, which can be viewed by following this link. Within this theme, I have created custom menu items that are designed to link directly to different sections on the same page. However, I am encountering an issue where I would like the entire menu to collapse when a specific <li> item is clicked. Below is the code snippet I have been working with:

jQuery( document ).ready(function($) {

    $('#menu-main li a').on("click", function(){
        $('.site-overlay-wrapper').hide();
    });

});

Currently, this code successfully hides the open menu but does not reset the menu button, making it impossible to re-open the menu. Any assistance in correcting this issue would be greatly appreciated.

SOLUTION

jQuery( document ).ready(function($) {

    $('#menu-main li a').on("click", function(){
        $("body").removeClass("overlay-open");
    });

});

Thank you all for your help!

javascriptjquerycsswordpress

Answer №1

If you want to switch between hiding and showing an element, jQuery's .toggle() method could be a good option.

Just replace the following line:

$('.site-overlay-wrapper').hide();

With:

$('.site-overlay-wrapper').toggle();

Answer №2

Can this offer assistance?

jQuery( document ).ready(function($) {
    var t = true;
    $('#menu-main li a').on("click", function(){
        if(t===true){
            $('.site-overlay-wrapper').hide();
            t=false;
        }
        else{
            $('.site-overlay-wrapper').show();
            t=true;
        }
    });

});

Check out this functioning example:

jQuery( document ).ready(function($) {
        var t = true;
        $('#button').on("click", function(){
            if(t===true){
                $('.show').hide();
              $(this).text("SHOW");
                t=false;
            }
            else{
                $('.show').show();
              $(this).text("HIDE");
                t=true;
            }
        });
    
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="button">CLICK</button>
<div class="show">HAPPY NEW YEAR!!!</div>

You may encounter difficulties with $('#menu-main li a'). That anchor tag is incorrect. You should target the click event directly to the button class as you are hiding your menu on any a tag within any li.

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

What is the best way to retrieve the value stored in a variable?

In my Node.js program, I have a snippet of code where I am working with a map named `transMap`. My goal is to retrieve the value for 'yy', which should be "ipaddress", and then output it as JSON. While I expected the JSON response to be { "ipaddr ...

javascriptnode.js

Achieve vertical alignment of a span text that spans multiple lines within an inline-block element

I am facing an issue with this code as the phrase "lorem ipsum" is not positioned in the center of its parent div: <div style="width: 500px; height: 500px; background-color: #f0f0f0"> <div style="display: inline-block; width: 100px; height: 1 ...

htmlcss

Adding app stylesheet in Django

I'm a bit unsure about how to incorporate CSS into my HTML. I have an app within my project that has its own template folder, and I would like to include the sample.css file in my HTML. I think it should be something like this: <link rel="styleshe ...

cssdjangodjango-templatesstatic-files

The ScrollToTop feature in MUI component seems to be malfunctioning when paired with the useScrollTrigger hook

I am in the process of developing a custom ScrollToTop component using MUI's useScrollTrigger hook. More information can be found at this link Feel free to check out the sample code here: https://codesandbox.io/s/stackoverlow-mui-usescrolltrigger-er9 ...

javascripthtmlcssreactjsmaterial-ui

Differences Between Data Captured from Form Submissions and Data Obtained Through Ajax

When attempting to incorporate reCAPTCHA into my MVC site, I encountered an issue where it would not validate unless submitted from a form. Here is the current implementation: @using(Html.BeginForm("VerifyCaptcha", "Signup") ) { @ReCaptch ...

javascriptjqueryajaxasp.net-mvcforms

Is a Selenium loop a viable option?

</head> <body> <table cellpadding="1" cellspacing="1" border="1"> <thead> <tr><td rowspan="1" colspan="3">test</td></tr> </thead><tbody> <tr> <td>click& ...

javascriptjqueryhtmlselenium-ide

Is it possible that the passing of Form Serialize and list to the controller is not functioning properly?

i am struggling with the following code in my controller: public ActionResult SaveWorkOrder(DTO_WorkOrder objWork, List<DTO_PartsWO> listTry) { //something } here is my model : public class DTO_WorkOrder { public string Id { get; set; ...

javascriptc#jqueryajaxmodel-view-controller

Error encountered with AJAX call when attempting to utilize string method

I am looking to add HTML content to a TinyMCE editor in an ASP.NET MVC project. After some thought, I have found a solution that involves converting the HTML file to a string on the server side and then calling it using Ajax on the client side. Here is a ...

javascriptc#jqueryajaxasp.net-mvc

Bidirectional data binding in Vue.js enables seamless communication between parent and child components, allowing for dynamic

Trying to implement v-for and v-model for two-way data binding in input forms. Looking to generate child components dynamically, but the parent's data object is not updating as expected. Here's how my template is structured: <div class="cont ...

javascriptvue.jscomponentsvuejs2vue-component

Conceal the prominent image when viewing a single post

I've been attempting to hide the featured image on single post view but so far, neither a plugin nor the theme panel option has worked for me. I even tried adding custom CSS code without success. Is there another method that can be used to hide the fe ...

css

What is the best way to align the logo image to the left side of the Material UI app bar without any gaps?

Currently, I am working on a material UI app bar to serve as my navigation bar. The issue I am encountering involves the logo image on the left side of the page having excessive spacing from the edge, as shown in the image below. I've tried adjusting ...

cssreactjsmaterial-ui

Alert: The specified task "taskname" could not be located. To proceed with running grunt, consider using the --force option

My current task involves converting .css files to .sass files using the 'grunt-sass-convert' npm module. Here is the configuration in my 'Gruntfile.js': 'use strict'; module.exports = function(grunt){ grunt.loadNpmTasks( ...

cssnode.jsnpmsass

jquery executes a function on each element that is discovered using the .find method

I am working with the following HTML code that is parsed by the system. I want to know how to perform an action on each "find" element and execute a specific function for every anchor found. HTML Code <ul> <li class="category"> <h2&g ...

jqueryhtmlfindnestedeach

Managing components within an array

I have this array called match where match[0] = [2014-05-30 15:21:20,781] DEBUG [scheduler-4] (DiamondSchedulerRunner.java:41) Current node is not a manager of:publishEmail in tenant:0 [2014-05-30 15:21:20,781] DEBUG [scheduler-1] (DiamondSchedulerRunne ...

javascriptarraysparsinglogging

Is there a way to automatically close one menu when another is opened by clicking?

When all other search results have failed to solve my issue, I resort to posting my own question. My problem involves opening hidden submenus in a website's main menu. However, when I open multiple submenus, they just stack above each other. Ideally, ...

javascriptmenudropdown

What is the best way to generate an error message in AJAX?

It seems that I am facing an issue with throwing an error message to indicate whether an email exists in my user table. I have realized that due to the asynchronous nature of AJAX, try and catch error messages cannot be used within the complete function. E ...

javascriptjqueryajaxtry-catch

I'm looking for a solution to implement a vertical carousel in Google's Materialize CSS without the need for custom development

Looking to create a unique vertical scrolling "carousel" using Google's Materialize CSS library. I have a good understanding of the steps required to construct a carousel. # haml %ul.carousel %li.carousel-item Some Content %li.carousel-item ...

javascriptjqueryhtmlcssmaterialize

Manipulating the display style of an element without using jQuery

Could anyone assist me with this issue? I am currently facing a challenge in making the following script functional. It is intended to hide the button after it has been clicked. The script is being called through Ajax and PHP, so I am unable to utilize jQ ...

phpjavascriptjqueryajaxonclick

Make sure to align images and comments seamlessly on your website just like in the comment section of YouTube

Looking for help aligning an image and two spans in one row <img src="../images/profile/profile.png" class="img" /> <span class="name">First Name</span> <span class="comment"> This is simply dumm ...

csshtml

What is the process for embedding a NextJS app within a different website?

I'm searching for alternative methods to embed a React/NextJS application within another application. Currently, my solution involves using an iframe and specifying the source as the execution of the React/Nextjs application. I've explored diff ...

javascriptreactjsiframenext.js