Как закрыть меню (slideToggle) по клику вне его?

Question

[Роман]

Есть меню на jquery. Работает через slideToggle. Т.е. оно закрывается и открывается только по клику на ссылку.
Как сделать чтобы оно закрывалось по клику в любом месте сайта, вне границ меню?

jQuery(document).ready(function($){
				$('#nav-wrap').prepend('<div id="menu-icon">Меню</div>');
				$("#menu-icon").on("click", function(){
					$("#nav").slideToggle();
					$(this).toggleClass("active");
				});
			});

Comments

[Flur]

Закрыть при клике на body

Answer 1

[Роман]

Решил вот таким образом:

$(document).mouseup(function (e) {
		var container = $("#nav");
		if (container.has(e.target).length === 0){
			container.hide();
		}
	});

Answer 2

[Александр Филиппенко]

Есть более простой способ. В качестве элемента по которому надо кликнуть для открытия меню берём ссылку, и на focus вешаем открытие меню, а на blur закрытие.

Answer 3

[Роман Назаркин]

/**
 * Fires callback when user clicks outside element
 */
(function ($) {
    var handlersCache = [];

    // setter
    $.fn.__doWhenClickOutside = function (callback, remove_after_exec) {

        // define vars
        var $this = $(this);
        remove_after_exec = (typeof remove_after_exec != 'undefined') ? remove_after_exec : true;

        // add new callback to a storage
        handlersCache.push({
            elem  : $this,
            cb    : callback,
            remove: remove_after_exec
        });

        return $this;
    };

    // trigger
    $(document).on('click.wph-outside', function (e) {

        var $target = $(e.target);
        if (handlersCache.length <= 0) {
            return;
        }

        $(handlersCache).each(function (index, handler) {
            if ($target.closest(handler.elem).length !== 0 || $target.is(handler.elem)) {
                return;
            }

            handler.cb.apply(handler.elem);

            if (handler.remove) {
                handlersCache.splice(index, 1);
            }
        });

    });
})(jQuery);

Использовать так:

$('#menu-icon').__doWhenClickOutside(function() {
  // вызывается когда произошел клик вне меню
  $('#nav').slideUp();
  $(this).removeClass('active');
}, false);

// если второй параметр равен true, то коллбэк исполнится один раз и далее удалится

Comments

[Flur]

Можно еще проще сделать. Просто скрыть блок при клике на body

[Роман Назаркин]

aslanovich: писал этот код для одного из своих старых проектов и в процессе разработки также пробовал сделать по такому принципу. В общем, не помню уже почему, но данный подход тогда для меня был неприемлем. В связи с этим получилось более громоздкое, но, на мой взгляд, более гибкое решение.

Answer 4

[MrTimon]

jQuery(document).click(function(e) {
    if (!$(e.target).closest('#nav') &&  $("#nav").is(':visible')) {
        $("#nav").slideToggle();
          $("#menu-icon").toggleClass("active");
    }
});

Как то так. Не проверял но должно работать