点击后关闭菜单

Question

我希望通过单击链接或在菜单外单击来关闭菜单。为了保持页面轻量，我不想使用jQuery。如何实现？

<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>

- DenisMasot

---

希望这可以帮到你 链接。 - Souad

这里有一些可能会对你感兴趣的内容：Javascript 点击隐藏 - Jeremy Comelli

Answer 1

可以使用DOM API在文档上使用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) {
  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>

- Adam

---

当我点击菜单以外的区域时，是否可以取消选中输入框？ - DenisMasot

@DenayM 这不是原始问题的一部分，但我已经更新了我的答案。您需要使用.checked属性。这些信息在谷歌上很容易找到...如果我的答案解决了您的问题，请考虑接受它。谢谢。 - Adam

Answer 2

一种方法，希望它有所帮助

    $(document).ready(function() {
        $('.click').click(function() {
                $('.nav__right').slideToggle("fast");
        });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<nav class="nav">
    <div class="nav__left">
      <h3><a href="#home">DenisMasot</a></h3>
    </div>
    <input type="checkbox" /><label class="burger" for="nav"></label>
  <button class="click">click me</button>
    <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>

- MKAD