Проблема, чувствую, пустяковая, но все же остается для меня проблемой. Код работает только при активной панели разработчика в браузере (проверял Яндекс.Браузер и Firefox), а также на телефоне. При клике на <div class="open_fall_menu"></div>
с активной панелью задач все работает, а при закрытой ни в какую не чувствует клик. Ниже привел "нерабочий" код. Учусь сей магии верстки с месяц в домашних условиях, поэтому, пожалуйста, разжуйте решение как можно подробнее без метания помидоров.
P.S. Проверить неработоспособность можно тут (в конце страницы)
document.querySelector('.open_fall_menu').addEventListener('click', function fallingMenu() {
let fallMenu = this.nextElementSibling.classList;
fallMenu.toggle('active');
});
#css13 {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
transform-style: preserve-3d;
perspective: 600px;
}
#css13 div {
margin: 20px 0 20px;
}
#css13 .open_fall_menu {
border: 1px solid black;
border-radius: 5px;
padding: 10px 10px 7px 10px;
}
#css13 .open_fall_menu>.burger_line {
width: 25px;
height: 4px;
background-color: #B200FF;
margin: 0 0 3px 0;
}
#css13 .fall_menu {
width: calc(100vw/5);
height: calc(100vh/3);
border-radius: 20px;
background-color: #231d51;
}
#css13 .fall_menu {
transform-origin: center top;
transform: rotateX(86deg);
opacity: 0;
transition: opacity 0.4s linear 0.4s, transform 0.8s cubic-bezier(0.68, -0.275, 0.825, 0.115) 0s;
}
#css13 .fall_menu.active {
transform: rotateX(0deg);
opacity: 1;
transition: opacity 0.4s linear 0s, transform 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s;
}
<div id="css13">
<div class="open_fall_menu">
<div class="burger_line"></div>
<div class="burger_line"></div>
<div class="burger_line"></div>
</div>
<div class="fall_menu"></div>
</div>
.fall_menu
перекрываете саму кнопку. добавьте дляopen_fall_menu
cursor:pointer
и будете видеть срабатывает или нет. В представленном выше снипетте работает, вопрос что при открытом дебаге работает - не верен так как видимо вы используете закрепленный дебаг (что уменьшает окно) большинство используют инспектор в отдельном окне, и тогда никакого влияния на поиск ошибки не будет)visibility: hidden;
,visibility: visible;