Отключить меню бургеров, пока пользователь находится внутри другого пункта меню

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

В прослушивателе событий щелчка я вижу, что «nav-wrapper», «hamburger-menu» и «change» - это классы, а не идентификаторы. Так что вместо document.getElementById вы должны использовать селектор, который вы использовали выше, document.querySelector.

В примечании на полях прочтите css селекторы , чтобы вы могли подробнее c при выборе элементов с использованием имен классов. В противном случае используйте идентификатор, если нацелен на конкретный элемент c.