0

Уже в отчаянии. Не знаю, что делать :-( Помогите, пожалуйста. Есть мобильное меню. По клику вне меню, меню закрывается, все хорошо. Используется стандартное решение для этого. Но на данном меню есть так же кнопка закрытия, "крестик". И эта кнопка работает не совсем корректно. Это заключается в том, что открытие/закрытие меню сработает по клику на этот крестик, но только если клик произойдет в любую верхнюю или нижнюю область, кроме центра. В центре текст "меню". Я уже по "всякому" пробовал играться с кодом. И никакого результата, к моему сожалению. Помогите, пожалуйста..

$(document).ready(function () {
  
     $(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);
    } 
    
    if (!$(".header_content_one_menu").is(e.target) && $(".header_menu_adaptive_button").has(e.target).length !== 0) {
       $('#header_menu_adaptive').prop('checked', true);
    }  
  });
  
});
#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>
</ul>

1 ответ 1

0

Получилось решить вот таким способом:

if (!$(".header_content_one_menu").is(event.target) && $(".header_content_one_menu").has(event.target).length === 0  && $(".header_menu_adaptive_button").has(event.target).length === 0) {
       $('#header_menu_adaptive').prop('checked', false);
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.