I am using a checkbox to toggle/untoggled to display the dropdown Navigation. What I am trying to do is that if the user clicks anywhere other than the Navigation, the Navigation will become unchecked -> if (document.getElementById("navToggle").checked) {console.log("uncheck the nav")}

With my code it seems to execute even if the user clicks on the Navigation, ignoring this -> if (!event.target.matches('.top-nav').

/*window.onclick = function (event) {
    if (!event.target.matches('.top-nav')) {
        if (document.getElementById("navToggle").checked) {
            console.log("uncheck the nav")
        }
    }
}*/

function myFunction(x) {
  x.classList.toggle("change");
}

function dropdown() {
  document.getElementById("myDropdown").style.display = "block"
}

window.onclick = function(event) {
  if (!event.target.matches('.top-nav')) {
    if (document.getElementById("navToggle").checked) {
      console.log("uncheck the nav")
    }
  }
}

@import url('https://fonts.googleapis.com/css?family=Work Sans:300,600');
:root {
  --background: rgba(0, 214, 170, .85);
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

button {
  cursor: pointer;
  background: none;
  border: 0;
  color: inherit;
  /* cursor: default; */
  font: inherit;
  line-height: normal;
  overflow: visible;
  padding: 0;
}


/* navigation styles start here */

header {
  background: var(--background);
  text-align: center;
  position: fixed;
  height: 5rem;
  z-index: 999;
  width: 100%;
}


/* changed this from the tutorial video to
   allow it to gain focus, making it tabbable */

.nav-toggle {
  position: absolute !important;
  top: -9999px !important;
  left: -9999px !important;
}

.nav-toggle-label {
  position: absolute;
  top: 0;
  left: 0;
  margin-left: 1em;
  height: 100%;
  display: flex;
  align-items: center;
}

.nav-toggle-container {
  display: inline-block;
  cursor: pointer;
}

.bar1,
.bar2,
.bar3 {
  width: 35px;
  height: 5px;
  background-color: white;
  margin: 6px 0;
  transition: 400ms;
}

.change .bar1 {
  transform: translate(0, 11px) rotate(-45deg);
}

.change .bar2 {
  opacity: 0;
}

.change .bar3 {
  transform: translate(0, -11px) rotate(45deg);
}

nav {
  position: absolute;
  text-align: left;
  top: 100%;
  left: 0;
  background: var(--background);
  width: 100%;
  transform: scale(1, 0);
  transform-origin: top;
  transition: transform 400ms ease-in-out;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  margin-top: 1em;
  margin-left: 1em;
  margin-bottom: 1em;
}

nav a,
nav button {
  color: white;
  text-decoration: none;
  font-size: 1.25rem;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 150ms ease-in-out;
}

nav a:hover,
nav .dropdown:hover>button {
  color: #000;
}

.nav-toggle:checked~nav {
  transform: scale(1, 1);
}

.nav-toggle:checked~nav a,
.nav-toggle:checked~nav .dropdown>button {
  opacity: 1;
  transition: opacity 250ms ease-in-out 250ms;
}

.arrow {
  border: solid #222;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
  margin-bottom: 4px;
}

.down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

.dropdown:hover .arrow {
  border: solid black;
  border-width: 0 3px 3px 0;
}

.dropdown-content {
  display: none;
}

.dropdown-content a {
  display: block;
  text-align: left;
  padding: 0;
  margin-top: .5em;
  margin-left: .5em;
  margin-bottom: .5em;
}

.show {
  display: block;
}

<header id="top-nav">
  <label for="navToggle" >
        <span
          ><div  onclick="myFunction(this)">
            <div ></div>
            <div ></div>
            <div ></div></div
        ></span>
      </label>
  <input type="checkbox" id="navToggle"  />
  <nav >
    <ul>
      <li>
        <a href="#">Home</a>
      </li>
      <li><a href="#">About</a></li>
      <li>
        <div >
          <button  onclick="dropdown()">
                Classes <i ></i>
              </button>
          <div  id="myDropdown">
            <div >
              <h1>Semester 1</h1>
              <a href="#">Physics 11</a>
              <a href="#">Chemistry 11</a>
              <a href="#">English 11</a>
              <a href="#">French 11</a>

              <h1>Semester 2</h1>
              <a href="#">Gym 11</a>
              <a href="#">Psychology 11</a>
              <a href="#">Law 11</a>
              <a href="#">Pre-calculus 11</a>
            </div>
          </div>
        </div>
      </li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

CodePudding user response：

Try to use eventListener everywhere

window.addEventListener("click", event => {
  const tgt = event.target.closest('.top-nav');
  if (!tgt && document.getElementById("navToggle").checked) {
    console.log("uncheck the nav")
  }
})

CodePudding user response：

Ignore - Deleted Draft

I'm unable to delete this answer just now, but will do it when my daily limit resets.