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

Question

Ситуация такая.. Есть стандартное решение закрытия блока по клику вне его области. Оно работает, но на данном блоке есть дочерний элемент, по клику на который должен закрываться главный блок. На данный момент, по клику на этот дочерний элемент ничего не происходит. Как в данном примере кода установить исключение для дочернего элемента. Пробовал вот так - $(".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>

Answer 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);
    }
  });
$("крестик").on('click',function (e){
...
});

БЛОГ НА HUSL

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

Ответы (1 шт):