Почему не получается закрыть всплывающие меню при начатии в любое место на экране?

Question

[del993788]

Здравствуйте. Появление и исчезание я реализовал, но почему-то не получается скрыть его, когда я нажимаю на любое другое место на экране. Много чего перечитал, но когда я добавляю какой либо код еще, у меня вообще ничего не работает. Посмотрите пожалуйста.

$(document).ready(function(){
	$("#knop").click(function(){
		$(".leftnav").toggleClass("xxx"); return false;
	});
});

<div class="leftnav"><a href="/">Навигация</a></div>
<div id="knop"></div>

.leftnav {
    width:200px;
    height:500px;
    background:#77e;
    transition: transform .3s;
    transform: translate(-100%, 0);
    position: absolute;
}

#knop {
    width:200px;
    height: 20px;
    background: #777;
    position: absolute;
}

.xxx {
    transform: translate(0, 0);

}

Answer 1

[Vadim Bogomazov]

Скрываем окно по клику снаружи

Comments

[del993788]

$(document).ready(function(){
$("#knop").click(function(){
$(".leftnav").toggleClass("xxx"); return false;
});
$("body").click(function(e) {

if($(e.target).closest(".leftnav").length==0) $(".leftnav").css("display","none");

});
});

Первое появление будет, но если я закрою его через клик по body, то второй раз он уже не откроется.

[Кирилл Пензин]

qqignatqq: правильно, вы же просто классы меняете. Значит и скрывать вам надо сменой классов, а не сменой свойства display.

[Vadim Bogomazov]

qqignatqq: скорее всего потому что надо под себя пример немного переделать, а не просто скопипастить :) jsfiddle.net/geez2m8s/1

[del993788]

Кирилл Пензин:
$("body").click(function(e) {
$(".leftnav").toggleClass("xxx"); return false;
});
Так? Тогда я не могу взаимодействовать с ссылкой в .leftnav

[del993788]

Vadim Bogomazov: Благодарю и прошу прощенья за свою необразованность.

[Кирилл Пензин]

qqignatqq: да просто удалите свой класс "xxx"...

[Vadim Bogomazov]

qqignatqq: да не за что, обращайтесь.

Answer 2

[del993788]

Если кто то столкнётся с этой проблемой, то вот решение