合上点击

我想通过点击一个链接或当我点击菜单外，关闭我的菜单中的菜单。为了保持好的东西，我不想使用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>

来源

2017-02-13 DenisMasot

希望这将帮助并[墨（http://stackoverflow.com/questions/6762750/close-a-menu-with-an-anywhere-click?rq=1） – Somar

这里的东西，你可能感兴趣的：使用Javascript上点击隐藏]（HTTP： //stackoverflow.com/questions/5515527/javascript-onclick-hide-div） –

它可以使用addEventListener()对文档DOM API来完成。然后，您需要逻辑来查找点击目标是否位于菜单或其任何元素上，或页面上的其他位置。

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

，然后菜单可以隐藏借与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>

来源

2017-02-13 10:08:56 Adam

是否有可能取消输入，当我点击菜单之外？ – DenisMasot

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

的一种方式，希望它有助于

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

来源

2017-02-13 10:08:40 MKAD

回答

相关问题