如何使用 javascript 禁用 div 元素？

Question

希望每个人都保持安全并进行大量编码。 我遇到问题并尝试了所有解决方案，但没有一个有效。 我确实有一个由 DIV 元素组成的 HAMBURGER MENU，当打开这个菜单时会显示所有的 MENU OPTIONS。 到目前为止它工作得很好，但是一旦第二个菜单打开，我想阻止用户使用汉堡菜单，直到第二个菜单关闭。 在我最后一次尝试中，我使用了 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

似乎问题是因为您在顶部添加了其他事件侦听器。 您可能需要将它们分开

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';
});

Answer 2

我认为您应该根据从 DOM 获得的信息来控制元素的行为。

如果您只是在 JS 中切换 boolean 值，那么控制菜单的行为会容易得多：

 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>

我只是在代码片段的主菜单中添加了一些颜色，以表明它未处于活动状态，但行为是通过在 JS 中设置Boolean变量来控制的。

我认为如果你让它像这样工作，它会让你的代码更简单。