如何使用javascript禁用div元素？

Question

希望大家都能保持安全，多编码。我有一个问题，并尝试了每一个解决方案，但没有一个是有效的。我确实有一个汉堡包菜单由DIV的元素，当打开这个菜单将显示所有的菜单选项。到目前为止，这是很好的工作，但一旦第二个菜单是开放的，我想阻止用户使用汉堡包菜单，直到第二个菜单关闭。在我最后一次尝试中，我使用了指针事件:没有，但信不信由你，它确实阻止了第二个菜单的工作，而不是第一个菜单。我将在这里张贴在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中切换一个布尔值，就可以更容易地控制菜单的行为：

​

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变量来控制的。

我认为，如果您让代码像这样工作，它将使您的代码更加简单。