单击时未关闭 Onclick

Question

This toggle function works my drop down as I need to a point. when i clcik my link the menu opens with the overlay. but if i click the link again only the menu closes. I need to change the overlay to none depending on toggle.

  function navDeck() {
    "use strict"
  document.getElementById("myDropdown").classList.toggle("is-open");
  document.getElementById("overlay").style.display = "block";
}

Answer 1

Did you try something like this.

New css class

.open-overlay{
  display:block;
}

JS

function navDeck() {
    "use strict"
  document.getElementById("myDropdown").classList.toggle("is-open");
  document.getElementById("overlay").classList.toggle("open-overlay");
}

Answer 2

I got it to work using the following

  function navDeck() {
    "use strict"
  document.getElementById("myDropdown").classList.toggle("is-open");
    var e = document.getElementById("overlay");

       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';    
}