单击时关闭菜单 [英] Close the menu on click

问题描述

我想通过单击链接或在菜单外单击来关闭菜单.为了保持美观和轻便，我不想使用 jQuery.

我该怎么做?

<div class="nav__left"><h3><a href="#home">DenisMasot</a></h3>

<input type="checkbox"/><label class="burger" for="nav"></label><ul class="nav__right"><li class="active"><h3><a href="#home">home</a></h3><li><h3><a href="#about">À propos</a></h3><li><h3><a href="#production">Réalisation</a></h3><li><h3><a href="#contact">联系方式</a></h3></nav>

解决方案

可以使用 addEventListener() 文档.然后，您需要使用逻辑来确定点击目标是在菜单或其任何元素上，还是在页面上的其他地方.

isDescendent() 借鉴自 如果一个元素包含在另一个元素中，如何检查 Javascript

然后可以使用 element.style.display = 'none'

隐藏菜单

我会质疑不使用 jQuery 的动机，从长远来看，你会为自己做更多的工作......

var menu = document.querySelector("nav.nav");var checkbox = document.querySelector("input[type=checkbox]");document.addEventListener("click", function(e) {如果(菜单！= e.target &&！isDescendant(menu, e.target)) {console.log("点击了其他地方");menu.style.display = '无';checkbox.checked = false;}}， 错误的);函数是后代(父母，孩子){var node = child.parentNode;而(节点！= null){如果(节点==父){返回真；}节点 = node.parentNode;}返回假；}

其余页面...
<nav class="nav"><div class="nav__left"><h3><a href="#home">DenisMasot</a></h3>

<input type="checkbox"/><label class="burger" for="nav"></label><ul class="nav__right"><li class="active"><h3><a href="#home">home</a></h3><li><h3><a href="#about">À propos</a></h3><li><h3><a href="#production">Réalisation</a></h3><li><h3><a href="#contact">联系方式</a></h3></nav>

I want to close my menu by clicking on a link or when I click outside the menu. In the interest of keeping things nice and light, I don't want to use jQuery.

How do I do it?

<nav class="nav">
  <div class="nav__left">
    <h3><a href="#home">DenisMasot</a></h3>
  </div>
  <input type="checkbox" /><label class="burger" for="nav"></label>
  <ul  class="nav__right">
    <li class="active">
      <h3><a href="#home">home</a></h3>
    </li>
    <li>
      <h3><a href="#about">À propos</a></h3>
    </li>
    <li>
      <h3><a href="#production">Réalisation</a></h3>
    </li>
    <li>
      <h3><a href="#contact">Contact</a></h3>
    </li>
  </ul>
</nav>

解决方案

It can be done with DOM API using addEventListener() on document. You then need logic to find if the click target was on the menu or any of its elements, or somewhere else on the page.

isDescendent() borrowed from How to check in Javascript if one element is contained within another

The menu can then be hidden with element.style.display = 'none'

I would question motivation to not use jQuery, you'll be making a lot more work for yourself in the long run...

var menu = document.querySelector("nav.nav");
var checkbox = document.querySelector("input[type=checkbox]");

document.addEventListener("click", function(e) {
  if (menu != e.target && 
      ! isDescendant(menu, e.target)) {
    console.log("Clicked somewhere else");
    menu.style.display = 'none';
    checkbox.checked = false;
  }
  
}, false);

function isDescendant(parent, child) {
     var node = child.parentNode;
     while (node != null) {
         if (node == parent) {
             return true;
         }
         node = node.parentNode;
     }
     return false;
}

<div>
  Rest of page...
</div>

<nav class="nav">
    <div class="nav__left">
      <h3><a href="#home">DenisMasot</a></h3>
    </div>
    <input type="checkbox" /><label class="burger" for="nav"></label>
    <ul  class="nav__right">
      <li class="active">
        <h3><a href="#home">home</a></h3>
      </li>
      <li>
        <h3><a href="#about">À propos</a></h3>
      </li>
      <li>
        <h3><a href="#production">Réalisation</a></h3>
      </li>
      <li>
        <h3><a href="#contact">Contact</a></h3>
      </li>
    </ul>
  </nav>

这篇关于单击时关闭菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！