Как отключить элемент div с помощью javascript?

Question

надеюсь, что все в безопасности и много кодируют. У меня возникла проблема, и я пробовал все решения, но ни одно из них не работает. У меня есть МЕНЮ ГАМБУРГЕРА, сделанное из элементов DIV, при открытии этого меню будут отображаться все ОПЦИИ МЕНЮ. Пока он работает отлично, но как только ВТОРОЕ МЕНЮ открыто, я хочу запретить пользователю использовать МЕНЮ ГАМБУРГЕРА до закрытия второго меню. В своей последней попытке я использовал POINTER-EVENTS: nome, но, хотите верьте, хотите нет, это останавливает работу второго меню, а не первого, как предполагалось. Я размещу здесь код в JS и буду очень благодарен за любые советы, которые мне помогут:

---

document.querySelector('.hamburger-menu').addEventListener('click', () => {
    document.querySelector('.nav-wrapper').classList.toggle('change');

    document.querySelector('#home-menu').addEventListener('click', () => {
    document.getElementById("class-nav-1").style.display = "block";
    document.getElementById("#hamburger-menu").style['pointer-events'] = 'none';

  });

  document.querySelector('#close-window').addEventListener('click', () => {

  document.getElementById("class-nav-1").style.display = "none"; 
  document.getElementById('.hamburger-menu').style.pointerEvents = "auto";
  });
});

---

Answer 1

Я думаю, вам следует оставить практику управления поведением элементов на основе информации, полученной из DOM.

Было бы намного проще контролировать поведение вашего меню, если бы вы просто переключили логическое значение в JS:

const btnFirst = document.getElementById('first')
const ddMenu = document.getElementById('second')
const ddItems = document.querySelectorAll('.dd-item')
const textArea = document.getElementById('third')

// this variable controls the behavior of the main menu
let btnFirstIsEnabled = true

btnFirst.addEventListener('click', function(e) {
  if (btnFirstIsEnabled) {
    btnFirstIsEnabled = false
    ddMenu.classList.remove('hidden')
    btnFirst.classList.add('disabled')
  } else {
    textArea.innerHTML = 'Cannot open dropdown again!'
  }
})

ddItems.forEach(e => {
  e.addEventListener('click', function(e) {
    textArea.innerHTML = `Clicked: ${e.target.getAttribute('data-val')}`
    ddMenu.classList.add('hidden')
    btnFirstIsEnabled = true
    btnFirst.classList.remove('disabled')
  })
})

.main {
  cursor: pointer;
}

.main.disabled {
  color: #eaeaea;
}

.hidden {
  display: none;
}

.dd-item {
  cursor: pointer;
}

<div id="third">Clicked:</div>
<div id="first" class="main">OPEN</div>
<div id="second" class="hidden">
  <ul>
    <li class="dd-item" data-val="dd 1">Click dropdown item 1</li>
    <li class="dd-item" data-val="dd 2">Click dropdown item 2</li>
    <li class="dd-item" data-val="dd 3">Click dropdown item 3</li>
  </ul>
</div>

Я просто добавил немного цвета в главное меню во фрагменте, чтобы показать, что оно не активно, но поведение управляется установкой переменной Boolean в JS.

Я думаю, что ваш код будет намного проще, если вы заставите его работать вот так.

Answer 2

Кажется, проблема в том, что вы добавляете другой прослушиватель событий внутри верхнего. Возможно, вам потребуется разделить их

document.querySelector('.hamburger-menu').addEventListener('click', () => {
  document.querySelector('.nav-wrapper').classList.toggle('change');
});

document.querySelector('#close-window').addEventListener('click', () => {
  document.getElementById("class-nav-1").style.display = "none";
  document.getElementById('.hamburger-menu').style.pointerEvents = "auto";
});


document.querySelector('#home-menu').addEventListener('click', () => {
  document.getElementById("class-nav-1").style.display = "block";
  document.getElementById(".hamburger-menu").style.pointerEvents = 'none';
});