How do i close Navbar when clicked outside and link-CodePudding

<input type="checkbox" id="menu-bars">
<label for="menu-bars"   id="nav-button">
    <span></span>
    <span></span>
    <span></span>
</label>
<script>
    const NavBtn = document.querySelector(".nav-button");
    const NavShow = document.querySelector(".navbar");

    NavBtn.addEventListener("click", function(){
        NavShow.classList.toggle("slide");
    })

    document.onclick = function(e){
        if(e.target.querySelector !== ".nav-button, input" && e.target.querySelector !== ".navbar")
        {
            NavShow.classList.remove("slide");
        }
     }
</script>

CodePudding user response：

I don't quite understand your question. Are you trying to hide the element? If that's so, there are a lot of approaches. Try to use the hidden attribute (One of the most basic):

let element = document.querySelector('.navbar')

window.onclick = () => {
    let condition = ... // bool (true or false)
    element.setAttribute('hidden', condition)
}

CodePudding user response：

Try this

document.addEventListener('click', (event) => {
  const isClickedOutside = !document.querySelector('.navbar').contains(event.target);

  // Like @sum117 said
  document.querySelector('.nav-button').setAttribute('hidden', isClickedOutside)
})

CodePudding user response：

The HTML wasn't complete .navbar isn't included so I guessed that it wraps around everything. I removed the checkbox becauase a dropdown menu is hindered in this type of layout and using JavaScript.

Add a class to all elements that are neutral -- meaning elements that you can click but nothing happens. Then bind the click event to document:

documnet.addEventListener('click', ...

Anything that has class .nav do nothing:

if (e.target.matches('.nav')) {
  return;
}

If the button is clicked, treat it as a toggle:

if (e.target.matches('.nav-button')) {
  return NavShow.classList.toggle('slide');
}

If anything else is clicked, close the menu:

NavShow.classList.remove('slide');

Note that the first two conditions are returned. What that does is short-circuit the function meaning it quits and doesn't continue on to the next condition. If you want the <span> to close when clicked, just remove the class .nav off of them in the HTML.

const NavShow = document.querySelector(".navbar");

document.addEventListener("click", function(e) {
  const chx = document.querySelector('#menu-bars');
  if (e.target.matches('.nav')) {
    return;
  }
  if (e.target.matches('.nav-button')) {
    return NavShow.classList.toggle('slide');
  }
  NavShow.classList.remove('slide');
})

.navbar {
  outline: 1px dashed green
}

.nav-button {
  display: inline-block;
  outline: 1px dashed blue
}

.nav-button span {
  display: none;
  outline: 1px dashed red;
}

.slide span {
  display: block;
}

<nav class='navbar nav'>
  <label >Open<br>
    <span class='nav'>1</span>
    <span class='nav'>2</span>
    <span class='nav'>3</span>
  </label>
</nav>