CODEWITHSUNDEEP
javascriptjquerycsswordpress
Fjott
Fjott

Reputation: 1137

Wordpress Close theme menu after click

I am using this Wordpress theme, called ichiban. I have made some custom menu items that links directly to sections on the same page. For these cases I would like the whole menu to un-toggle when the < li > item is clicked. This is the code I have been working on;

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

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

});

For now, this code only hides the open menu, the menu button does not reset, and it is not possible to re-ope the menu. Please help me getting this code correct.

SOLUTION

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

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

});

Thank you all :)

Upvotes: 2

Views: 3107

Answers (2)

Ivijan Stefan Stipić
Ivijan Stefan Stipić

Reputation: 6668

Does this help you?

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;
        }
    });

});

Here is working 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 also can have a problem with $('#menu-main li a'). That a tag is wrong. You need to point click statement to button class directly because you hide your menu on any a tag inside any li.

Upvotes: 0

Stickers
Stickers

Reputation: 78676

You can try using jQuery .toggle() method.

Change this line:

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

To:

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

Upvotes: 2

Related Questions