Удалить класс через js, чтобы боковое меню уезжало за зону видимости

Question

Нужно убрать класс .active при нажатии на крестик, не понимаю в чем проблема: HTML

<div class="DivheaderRightSliderOpentButton">
<div class="headerRightSliderOpentButton"><i class="fa fa-bars" aria-hidden="true"></i></div>
    <div class="menu_right">
         <div id="close">&times;</div>
         <p>текст текст текст </p>
   </div>
</div>

CSS

.menu_right {
  position: fixed;
  display: block;
  width: 20vw;
  height: 100%;
  right: -100%;
  top: 0;
  z-index: 1;
  background: #263b5c;
  transition: right 1s;
}

.menu_right.active {
  right: 0;
  transition: right 1s;
}

js

document.querySelector('.DivheaderRightSliderOpentButton').onclick = function right_menu() {
  document.querySelector('.menu_right').classList.add('active'); 
}
document.getElementById("close").onclick = function close_menu() {
  document.querySelector('.menu_right').classList.remove('active'); 
}

Answer 1

Событие всплывает и клик срабатывает на верхнем элементе. Надо блокировать всплытие:

document.getElementById("close").onclick = function(e) {
    e.stopPropagation(); // <--- ВОТ ТАК
    document.querySelector('.menu_right').classList.remove('active'); 
}

Answer 2

Было бы правильнее поступить следующим образом:

const rightMenu = document.querySelector('.menu_right');
const rightMenuOpenBtn = document.querySelector('.DivheaderRightSliderOpentButton');
const rightMenuCloseBtn = document.getElementById('close');

rightMenuOpenBtn.onclick = showRightMenu;
rightMenuCloseBtn.onclick = hideRightMenu;

function showRightMenu() {
  rightMenu.classList.add('active');
}

function hideRightMenu() {
  rightMenu.classList.remove('active'); 
}

БЛОГ НА HUSL

Удалить класс через js, чтобы боковое меню уезжало за зону видимости

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