How Do I Close Menu On Click And When The User Clicks Away?

I have the following code: (function ($) { $(document).ready(function () { $('.clicker_class').click(function () { $('.show_menu_users').show(); })

Solution 1:

Cfs's solution works but there is an easier way to do that, without basing yourself on a global variable (which is better to avoid).

The ".toggle()" function (without parameters) of jQuery hide your element if it is visible and show it if it isn't. Then you just have to launch $( ".show_menu_users" ).toggle() when you click on the button and hide the menu when you click on the document. The problem is that clicking on any elements will close the menu, to prevent it you just have to stop the event propagation by using "event.stopPropagation()"

$( document ).ready( function () {
    $( ".clicker_class" ).on( "click", function ( event ) {
        event.stopPropagation(); 

       $( ".show_menu_users" ).toggle(); 
    });

    $( document ).on( "click", function () {
        $( ".show_menu_users" ).hide(); 
    }); 

    $( ".show_menu_users" ).on( "click", function ( event ) {
        event.stopPropagation(); 
    }); 
}); 

Working example here

Solution 2:

UPDATED to close menu if clicked outside of clicker_class elements.

You can track the state of the show_menu_users using a boolean. When you click on the clicker_class elements, toggle the menu and update the boolean. When you click elsewhere in teh document, close the menu.

(function ($) {
    $(document).ready(function () {
        var isShowing = false;

        var toggleMenu = function() {
            isShowing = !isShowing; //change boolean to reflect state change
            $('.show_menu_users').toggle(isShowing); //show or hide element
        }

        $(document).on('click', function (e) {
            if($(e.target).is('.clicker_class') || $(".clicker_class").has(e.target).length !== 0) {
                toggleMenu();
            } else {
                isShowing = false;
                $('.show_menu_users').hide();  
            }
        });
    });
})(jQuery);

Working example here.

Solution 3:

See if its fit your needs:

$(function(){
    //we set a tabindex attribute in case of this element doesn't support natively focus
    //outline just for styling
    $(".clicker_class").prop('tabindex',-1).css({outline:0});
});

$(".clicker_class").click(function () {
     $('.show_menu_users').toggle();
}).on('focusout',function(){
    $(this).hide();
});

Solution 4:

I use this method, which I think is a cleaner answer.

Add to your html page just after/before the opening/closing body tag:

<div class="main-mask"></div>

Then in your js file:

(function() {

  'use strict';

  $(".sidenav-toggle").on( "click", function() {
      $("#sidenav").toggleClass("sidenav--open");
      $(".main-mask").toggleClass("main-mask-visible");
  });

  $(".main-mask").on( "click", function() {
      $("#sidenav").toggleClass("sidenav--open");
      $(".main-mask").toggleClass("main-mask-visible");
  });

})();

In your css:

.main-mask {
    height: 100%;
    left: 0;
    opacity: 0.1;
    top: 0;
    visibility: hidden;
    width: 100%;
    z-index: 1;
    position: fixed;
}

This way, your mask acts as the click away. You can bind/unbind events and use the .main-mask class with other elements. The downside is that it needs to be added to the page. You could use css body:after {content:''} to remove that dependency.