クリック時のメニューを閉じる

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> 

Answer 1

に役立ちます願っています。クリックターゲットがメニュー上にあるのか、その要素にあるのか、ページ上の他の場所にあるのかを見つけるロジックが必要です。 How to check in Javascript if one element is contained within another

メニューから借り

isDescendent()その後、私はあなたが長期的には自分自身のためのより多くの仕事をすることになります、jQueryのを使用しないように動機を問うだろうelement.style.display = 'none'

で非表示にすることができます。..これは役立ちます。

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>

Answer 2

一つの方法、それはそれは文書でaddEventListener()を使用してDOMのAPIで行うことができます

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