Question

当用户位于另一个菜单选项中时，我只需要禁用我的汉堡菜单。不幸的是，菜单始终处于活动状态，因此无法禁用它。

PS：功能disableLink（）和ableLink（）无法正常工作，其他所有功能都可以正常工作。

document.querySelector('.hamburger-menu').addEventListener('click', () => {

    document.querySelector('.nav-wrapper').classList.toggle('change');

    var x = document.getElementById("top-nav-id");
    if (x.style.display === "block") {
      x.style.display = "none";
    } else {
      x.style.display = "block";
    }

    document.querySelector('#home-menu').addEventListener('click', () => {

      document.getElementById("class-nav-1").style.display = "block";

      disableLink();
    });

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

      document.getElementById("class-nav-1").style.display = "none";

      ableLink();
    });
});

function disableLink() {
  document.getElementById('nav-wrapper').disabled=true;
  document.getElementById('nav-wrapper').removeAttribute('href');    
  document.getElementById('nav-wrapper').style.textDecoration = 'none';
  document.getElementById('nav-wrapper').style.cursor = 'default';
  document.getElementById('nav-wrapper').style.visibility = hidden;
  document.getElementById('nav-wrapper').style['pointer-events'] = 'none';

  document.getElementById('hamburger-menu').disabled=true;
  document.getElementById('hamburger-menu').removeAttribute('href');    
  document.getElementById('hamburger-menu').style.textDecoration = 'none';
  document.getElementById('hamburger-menu').style.cursor = 'default';
  document.getElementById('hamburger-menu').style.visibility = hidden;
  document.getElementById('hamburger-menu').style['pointer-events'] = 'none';
}

function ableLink() {
  document.getElementById('change').disabled=false;
  document.getElementById('change').addAttribute('href');    
  document.getElementById('change').style.textDecoration = 'solid'
  document.getElementById('change').style.cursor = 'pointer';
}

Answer 1

在click事件侦听器中，我可以看到'nav-wrapper'，'hamburger-menu'和'change'是类而不是id。因此，您应该使用document.getElementById而不是document.querySelector。

在旁注中，请阅读css selectors，以便在使用类名选择元素时更加具体。否则，如果定位到特定元素，则使用id。

当用户在另一个菜单选项中时，禁用汉堡菜单

1 个答案: