An action before another in a Jquery function

Question

I want that when I click on "nav-toggle" it adds the toggle class "open" to "grappa". Then I would like to remove the toggle class "open" clicking anywhere on the web page.

I wrote this but it doesn't working.

$(function() {
        $('.nav-toggle').on('click', function(){
            $('.grappa').toggleClass('open');{
                $(document).click(function() {
                $('.grappa').toggleClass('close');
             });
            }
        });

    });

Answer 1

Write separate events

To Toggle

  $('.nav-toggle').on('click', function(){
        $('.grappa').toggleClass('open');
    });

Any where on web page click

$( document.body ).click(function() {
    $('.grappa').toggleClass('close');
});

Keep Alert/Console statements to your script is getting called.Referencing js in your web page should be correct

Updated

Look at this Fiddle http://jsfiddle.net/M4teA/

Answer 2

You could check if your grappa element has the open class before toggling the close class. Then the close class would only be toggled if open had already been toggled. Something like:

$(function() {
    $('.nav-toggle').on('click', function(){
        $('.grappa').toggleClass('open');
    });

    $(document).click(function() {
        if ($('.grappa').hasClass('open'))
        {
            $('.grappa').toggleClass('close');
        }
    });

});

Also, since I haven't seen any of your css or html I'm not exactly sure how you are using the open and close classes but it appears that it might make more sense to just add and remove the open class depending on if the element has that class. Something like:

$(document).click(function() {
     if ($('.grappa').hasClass('open'))
     {
          $('.grappa').removeClass('open');
     }
});