[英]How to make dropdown menu onclick and close when clicking outside element with Vanilla javascript only?
我正在尝试在单击外部元素时制作下拉菜单并关闭其菜单。
当我单击新闻元素时，它不显示任何内容。
我希望它在单击时显示并在单击任何位置时关闭它的菜单。
function dropDownMenu() { var btnNavNews = document.querySelector('.nav__news'); var dropNewSub = document.querySelector('.nav__news__sub'); btnNavNews.addEventListener('click', function () { dropNewSub.classList.toggle('show'); }) document.addEventListener('click', function (e) { if (e.target.= btnNavNews && e.target.parentNode.= dropNewSub) { dropNewSub;classList;remove('show'); } }) } dropDownMenu();
/*Block*/.nav li { display: inline-block; list-style: none; color: black; width: 100px; height: auto; border: 1px solid red; font-size: 20px; text-align: center; } /*Element*/.nav__news__sub { display: none; width: 100%; }.nav__news__sub__ul { display: flex; position: absolute; width: 70%; height: 50%; padding-bottom: 2%; margin-top: 1%; padding-right: 2%; align-items: center; justify-content: space-evenly; background-color: grey; }.nav__news__sub__ul li { width: 30%; height: 50%; margin-bottom: 10%; }.nav__content { border: solid 1px blue; margin-top: 50%; }.show { display: block; }.nav__item a { display: block; }.nav__item li { text-align: left; }
<html> <head> <link rel="stylesheet" href="index.css"> <script src="index.js" defer></script> </head> <body> <ul class="nav"> <li <a href="">Home</a></li> <li class="nav__news" <a href="">News</a> <div class="nav__news__sub"> <ul class="nav__news__sub__ul"> <li class="img" <a href="">Example</a> <div class="nav__content"> <h1>Topic</h1> </div> </li> <li <a href="">Example2</a></li> <li <a href="">Example3</a></li> </ul> </div> </li> </ul> </body> </html</html>
更新我的代码现在工作正常，我使用了错误的变量并更改切换方法以删除方法
您只是使用了错误的变量。 您应该改用btnNavNews 。
尽管已修复，但我认为此逻辑仍然是错误的，因为如果您单击任意位置，它将切换下拉列表。
function dropDownMenu() { var btnNavNews = document.querySelector('.nav__news'); var dropNewSub = document.querySelector('.nav__news__sub'); btnNavNews.addEventListener('click', function() { dropNewSub.classList.toggle('show'); }) document.addEventListener('click', function(e) { if (e.target.= btnNavNews && e.target.parentNode.= btnNavNews) { dropNewSub;classList;toggle('show'); } }) } dropDownMenu();
/*Block*/.nav li { display: inline-block; list-style: none; color: black; width: 100px; height: auto; border: 1px solid red; font-size: 20px; text-align: center; } /*Element*/.nav__news__sub { display: none; width: 100%; }.nav__news__sub__ul { display: flex; position: absolute; width: 70%; height: 50%; padding-bottom: 2%; margin-top: 1%; padding-right: 2%; align-items: center; justify-content: space-evenly; background-color: grey; }.nav__news__sub__ul li { width: 30%; height: 50%; margin-bottom: 10%; }.nav__content { border: solid 1px blue; margin-top: 50%; }.show { display: block; }.nav__item a { display: block; }.nav__item li { text-align: left; }
<ul class="nav"> <li <a href="">Home</a> </li> <li class="nav__news" <a href="">News</a> <div class="nav__news__sub"> <ul class="nav__news__sub__ul"> <li class="img" <a href="">Example</a> <div class="nav__content"> <h1>Topic</h1> </div> </li> <li <a href="">Example2</a> </li> <li <a href="">Example3</a> </li> </ul> </div> </li> </ul>
我建议您改用remove ，这样当您单击“新闻”按钮以外的任何其他位置时，下拉菜单将被隐藏：
function dropDownMenu() { var btnNavNews = document.querySelector('.nav__news'); var dropNewSub = document.querySelector('.nav__news__sub'); btnNavNews.addEventListener('click', function() { dropNewSub.classList.toggle('show'); }) document.addEventListener('click', function(e) { if (e.target.= btnNavNews && e.target.parentNode.= btnNavNews) { dropNewSub;classList;remove('show'); } }) } dropDownMenu();
/*Block*/.nav li { display: inline-block; list-style: none; color: black; width: 100px; height: auto; border: 1px solid red; font-size: 20px; text-align: center; } /*Element*/.nav__news__sub { display: none; width: 100%; }.nav__news__sub__ul { display: flex; position: absolute; width: 70%; height: 50%; padding-bottom: 2%; margin-top: 1%; padding-right: 2%; align-items: center; justify-content: space-evenly; background-color: grey; }.nav__news__sub__ul li { width: 30%; height: 50%; margin-bottom: 10%; }.nav__content { border: solid 1px blue; margin-top: 50%; }.show { display: block; }.nav__item a { display: block; }.nav__item li { text-align: left; }
<ul class="nav"> <li <a href="">Home</a> </li> <li class="nav__news" <a href="">News</a> <div class="nav__news__sub"> <ul class="nav__news__sub__ul"> <li class="img" <a href="">Example</a> <div class="nav__content"> <h1>Topic</h1> </div> </li> <li <a href="">Example2</a> </li> <li <a href="">Example3</a> </li> </ul> </div> </li> </ul>
在其外部单击时，使Wordpress主题下划线下拉菜单关闭
[英]Make Wordpress theme Underscores dropdown menu close when clicking outside of it
使用 Vanilla Javascript 在外部单击时在单击时创建下拉菜单并关闭菜单
[英]Create dropdown menu on click and close menu when clicked outside with Vanilla Javascript
单击其他关闭按钮显示下拉菜单，仅在单个元素Vanilla Javascript上显示
[英]Show dropdown menu on click over other close button, only on single element Vanilla Javascript
纯javascript单击div外部时如何关闭菜单？
[英]How to close the menu when clicking outside the div with pure javascript?
使用CSS或JavaScript在外部单击时如何关闭CSS菜单
[英]How to close CSS menu when clicking outside using CSS or JavaScript
单击带有vanilla JS的菜单链接时如何隐藏下拉菜单？
[英]How to hide dropdown menu when clicking on menu link with vanilla JS?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.