samedi 29 août 2015

jQuery If/Else statement, to check if element has class produces both results?

I am using the enquire.js library to add JavaScript media queries into a site I am developing.

The issue happens when I initially load the website.

  1. I resize into the 860px breakpoint, and toggle the nav. All works fine and as expected.
  2. Then I resize past 860px.
  3. And once again I resize back into the 860px enquire.js media query. The toggle nav outputs both console messages.

Any ideas?

   enquire.register("screen and (max-width:860px)", {

        match : function()
        {   
            nav_wrapper.removeClass('show').addClass('hide');

            nav_toggle.click(function()
            {
                if((nav_wrapper).hasClass('hide'))
                {
                    console.log('It\'s hidden bud');
                    nav_wrapper.removeClass('hide').addClass('show');
                }
                else
                {
                    console.log('It\'s opedn up mate');
                    nav_wrapper.removeClass('show').addClass('hide');
                }

            });

        },

        unmatch : function()
        {
            nav_wrapper.removeClass('hide').addClass('show');
        },

    });

Aucun commentaire:

Enregistrer un commentaire