Ситуация такая.. Есть стандартное решение закрытия блока по клику вне его области. Оно работает, но на данном блоке есть дочерний элемент, по клику на который должен закрываться главный блок. На данный момент, по клику на этот дочерний элемент ничего не происходит. Как в данном примере кода установить исключение для дочернего элемента. Пробовал вот так - $(".menu_close").has(e.target).length !== 0, и не помогает, а так же $(".menu_close").has(e.target).length == 1. Та же ситуация.
$(document).mouseup(function (e){
if (!$(".header_content_one_menu").is(e.target) && $(".header_content_one_menu").has(e.target).length === 0) {
$('#header_menu_adaptive').prop('checked', false);
}
});
#header_menu_adaptive {
display: none;
}
.header_menu_adaptive_button {
display: flex;
align-items: center;
width: 50px;
height: 50px;
cursor: pointer;
z-index: 999999;
padding: 0 20px 0 0;
}
#header_menu_adaptive:checked ~ .header_menu_adaptive_button > span {
transform: rotate(45deg);
visibility: hidden;
transition: 0.05s;
}
#header_menu_adaptive:checked ~ .header_menu_adaptive_button> span::before {
top: 0;
transform: rotate(0);
visibility: visible;
}
#header_menu_adaptive:checked ~ .header_menu_adaptive_button > span::after {
top: 0;
transform: rotate(90deg);
visibility: visible;
}
.header_menu_adaptive_button > span::after {
content: '';
top: 28px;
width: 50px;
height: 2px;
background-color: #B72A20;
transition-duration: .25s;
}
#header_menu_adaptive:checked ~ .header_content_one_menu {
visibility: visible;
left: 0;
}
.header_menu_adaptive_button > span, .header_menu_adaptive_button> span::before, .header_menu_adaptive_button > span::after {
display: flex;
justify-content: center;
width: 50px;
position: absolute;
text-transform: uppercase;
color: #B72A20;
font-family: RobotoCondensed;
letter-spacing: 2.4px;
transition-duration: .25s;
font-size: 16px;
z-index: 11112;
}
.header_menu_adaptive_button > span::before {
content: '';
bottom: 29px;
width: 50px;
height: 2px;
background-color: #B72A20;
transition-duration: .25s;
}
.header_content_one_menu {
display: grid;
grid-row-gap: 20px;
position: absolute;
visibility: hidden;
top: 0;
border-radius: 0 0 0 0;
left: -100%;
width: 100%;
height: auto;
margin: 0;
padding: 40px 0 40px 0;
background-color: yellow;
transition-duration: .25s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="header_menu_adaptive" type="checkbox">
<label class="header_menu_adaptive_button" for="header_menu_adaptive">
<span>меню</span>
</label>
<ul class="header_content_one_menu">
<li class=""><a href="" class="header_content_one_menu_unit">111</a></li><li class=""><a href="" class="header_content_one_menu_unit">222</a></li><li class=""><a href="" class="header_content_one_menu_unit">333</a></li><li class=""><a href="" class="header_content_one_menu_unit">444</a></li><li class=""><a href="" class="header_content_one_menu_unit">555</a></li><li class=""><a href="" class="header_content_one_menu_unit">666</a></li>
</ul>