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

$(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);

}