时间戳

首页 > 解决方案 > 当用户在另一个菜单选项中时禁用汉堡菜单

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

问题描述

当用户在另一个菜单选项中时，我只需要禁用我的汉堡菜单。不幸的是，没有什么可以禁用它，因为菜单始终处于活动状态。

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

标签： javascriptcss

解决方案

在单击事件侦听器中，我可以看到“导航包装器”、“汉堡菜单”和“更改”是类而不是 id。因此，document.getElementById您应该使用上面使用的选择器，而不是使用document.querySelector.

在旁注中，阅读css 选择器，以便在使用类名选择元素时更具体。否则，如果针对特定元素，则使用 id。

推荐阅读