CODEWITHSUNDEEP
jqueryhtml
havingagoatit
havingagoatit

Reputation: 583

removing class in 2 separate functions

I have this script that changes the hamburger (menu icon) to an X when it is open and the standard three lines when it is closed, (standard stuff).

The X state has a class of nav-toggle called ".active"

I have defined the body html as class .metro so when you click on the main screen when the menu has been opened it will close the menu and also get rid of the class "active" , (back to 3 lines and menu closed) ...

.... can someone tell me why this code doesn't work.

$(document).ready(function () {
    var state = false;
    $(".navbtn").click(function () {
        if(!state){
            $('#menu').multilevelpushmenu('expand');
            state = true;
           $('.nav-toggle').addClass('active');
           $(this).removeClass('active');
        }
        else{
            $('#menu').multilevelpushmenu('collapse');
            state = false;
             $('.nav-toggle').removeClass('active');
           $(this).addClass('active');
        }
    });
});

$( '.metro' ).click(function(){
        $( '#menu' ).multilevelpushmenu( 'collapse' );
        $('.nav-toggle').removeClass('active');
               $(this).addClass('active');

});

the methods for collapse and expand are defined http://multi-level-push-menu.make.rs/

the html for the hamburger and the button is ...

<div class="navbtn"> <p><a class="nav-toggle" href="#"><span></span></a>Menu</p>
    </div>

I know that .metro includes everything in the body and this includes the menu itself which is why it isn't working so perhaps it needs to include .metro css background img to be more speific for the cliable area of the body withouth including the menu.

Upvotes: 1

Views: 51

Answers (1)

havingagoatit
havingagoatit

Reputation: 583

Basically .metro being the html body covers everything within it INCLUDING the actual menu... this confuses the code as your basically saying click on the body to close or the menu and it doesn't know which one so it basically doesn't run the code.... declaring the main body space in a seperate div or class worked !

Upvotes: 1

Related Questions