Logic for showing elements and hiding them on body click
<p>I have some piece of code. 
This code on button click open menu.
When i click on button again, menu is hidden (i remove .<code>show</code> class, show class has <code>display:block</code> rule, so i toggle visibility of this item by clicking on button).
In next line, i have event, which check what element is clicked. If i "click" outside" of menu, menu become hidden, beacuse i remove <code>.show</code> class.</p>

<p>And now i have a problem, it looks like first part of code dont work anymore (button.on('click')) - i mean, work, but second part of code is also executed, and this logic is now broken.</p>

<p>Have you got any idea for workaround?
Thanks</p>

<pre><code>        var menu = $('.main-menu');
        var button = $('.burger');
        button.on('click',function() {
            if (menu.hasClass('show')) {
                menu.removeClass('show');
                $(this).removeClass('opened');
            } else {
                menu.addClass('show');
                $(this).addClass('opened');
            }
        });
        $(document).bind( "mouseup touchend", function(e){
            var container = menu;
            if (!container.is(e.target)
                &amp;&amp; container.has(e.target).length === 0) {
                container.removeClass('show');
                button.removeClass('opened');
            }

        });
</code></pre>