导航栏单击时隐藏菜单项

<ul class="navbar">
  <li><a href="#">菜单项1</a></li>
  <li><a href="#">菜单项2</a></li>
  <li><a href="#">菜单项3</a></li>
  <li><a href="#">菜单项4</a></li>
</ul>

.navbar {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.navbar li {
  display: inline-block;
}

.navbar li a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: #000;
}

.navbar li.hidden {
  display: none;
}

var navbarItems = document.querySelectorAll('.navbar li');

for (var i = 0; i < navbarItems.length; i++) {
  navbarItems[i].addEventListener('click', function() {
    for (var j = 0; j < navbarItems.length; j++) {
      navbarItems[j].classList.add('hidden');
    }
    this.classList.remove('hidden');
  });
}