При клике на button открывается список. Нужно чтобы при клике на документ и при клике на пункт списка, сам список скрывался.
Но код работает через раз. При первом открытии списка, кликаю на документ и список скрывается, но уже больше не появляется. + не исчезает если кликать на пункт списка.
Вопрос: Как правильно скрыть меню при при клике на пункт этого меню?
$(window).on("load resize", function(){
//do something
var width = $(document).width();
if (width < 768){
$('.btn-trigger').click( function(e){
e.preventDefault();
var
$this = $(this),
pj = $this.closest('.project');
if(!pj.hasClass('open')){
pj.addClass('open');
}else{
pj.removeClass('open');
}
});
}else if (width > 768){
$('.project').removeClass('open');
}
});
$(document).mouseup(function (e) {
var container = $('.project');
if (container.has(e.target).length === 0){
container.removeClass('open');
}
});
ul {
margin: 0;
padding: 0;
list-style-type: none;
display: none;
align-items: center;
align-content: center;
justify-content: space-around;
flex-flow: row nowrap;
height: 40px;
background: #ccc;
position: absolute;
top:0;
left: 0;
right: 0;
}
.project {
width: 100%;
height: 100vh;
padding-top: 150px;
position: relative;
}
.btn-trigger {
position: absolute;
top:100px;
left: 20px;
}
.open ul {
display: flex;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div class="project">
<a href="#" class="btn-trigger">button</a>
<ul>
<li>
<a href="#i-1" class="link">item-1</a>
</li>
<li>
<a href="google.com" class="link">item-2</a>
</li>
<li>
<a href="#i-2" class="link">item-3</a>
</li>
</ul>
<div id="i-1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi quo, saepe blanditiis deleniti ipsum harum delectus asperiores distinctio atque natus aliquam vitae recusandae nobis, ea, voluptatum optio est tenetur praesentium quidem quibusdam nulla sint? Accusantium asperiores amet reiciendis esse quasi reprehenderit vero ipsa, obcaecati dicta labore, illum corporis ea aut aliquid eius, nesciunt natus, voluptatum! Illum delectus cum quibusdam sequi in officiis rem ab architecto tenetur, necessitatibus molestiae, dolor eligendi laborum facere et quaerat molestias ipsam, quisquam voluptatibus maiores debitis. Quis praesentium animi, ipsum dicta ducimus labore inventore eum itaque alias officiis delectus eveniet nisi quos iusto harum obcaecati sunt reprehenderit necessitatibus, quisquam modi. Accusamus, magnam culpa tempore commodi! Neque id quas cupiditate, veniam at culpa nihil, consequatur, itaque, quo cumque reiciendis qui sit. Suscipit atque fuga culpa voluptas, expedita, delectus incidunt iste debitis sunt, accusantium libero dolore tempora neque vitae aperiam laudantium distinctio eveniet praesentium. Nam nobis natus ipsa iure, reprehenderit eius quo officia quasi ut. Dolorem reiciendis blanditiis totam neque repudiandae minus omnis odio assumenda accusantium, magni ea vel, temporibus dolorum aspernatur sed eveniet tenetur exercitationem praesentium dicta rerum, culpa. Odio necessitatibus officiis error minima earum nemo iure vero commodi inventore consequuntur, doloremque alias, ipsum fugiat veniam perspiciatis!
</div>
<div id="i-2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic dolorum aperiam ex non excepturi aliquid itaque mollitia fugiat assumenda voluptatem nulla id iusto quis nemo sit molestias, temporibus corporis nostrum numquam iste, pariatur reprehenderit deserunt. Odio nihil distinctio voluptates error placeat nesciunt natus quasi, autem debitis illo eligendi nemo libero officia accusantium at quam magnam. Facere reprehenderit distinctio vitae corporis error unde consequatur ipsam, deserunt suscipit libero temporibus quam non vero vel, commodi enim magni corrupti dolore ab minus dolorum explicabo praesentium. Libero aperiam eos rem sint repellendus iure dolore minus hic, quasi, consectetur fuga voluptates necessitatibus. Vitae, quo. Velit!
</div>
</div>
$('.btn-trigger').click( function(e){ ...
прикрепляет еще один обработчик. Все прикрепленные обработчики выполняются на click. При их четном количестве - выглядит так, что код ничего не делает.