[英]Toggling individual elements of the same class in dropdown menu
I am building a dropdown menu.我正在构建一个下拉菜单。 As is, when I open one submenu, it stays open, even if I open a second submenu.事实上,当我打开一个子菜单时,它会保持打开状态,即使我打开第二个子菜单也是如此。 When I open the second submenu, it should close any other open menus.当我打开第二个子菜单时,它应该关闭所有其他打开的菜单。
const submenuLinks = document.querySelectorAll('.has-submenu > a'); submenuLinks.forEach(element => element.addEventListener('click', function(e) { var submenu = element.nextElementSibling; if (submenu.classList.contains('menu-hide')) { submenu.classList.add('menu-show'); submenu.classList.remove('menu-hide'); } else { submenu.classList.add('menu-hide'); submenu.classList.remove('menu-show'); } }));
.menu-hide { display: none; }.menu-show { display: block; }
<nav> <ul class="menu"> <li> <a href="#">Menu Item 1</a> </li> <li class="has-submenu"> <a href="#">Menu Item 2 »</a> <ul class="menu-sub menu-hide"> <li><a href="#">Submenu Item 1</a></li> <li><a href="#">Submenu Item 2</a></li> <li><a href="#">Submenu Item 3</a></li> </ul> </li> <li class="has-submenu"> <a href="#">Menu Item 3 »</a> <ul class="menu-sub menu-hide"> <li><a href="#">Submenu Item 1</a></li> <li><a href="#">Submenu Item 2</a></li> <li><a href="#">Submenu Item 3</a></li> </ul> </li> </ul> </nav>
before your logic that hides the current submenu, you can hide every submenu (ul with class 'menu-sub').在隐藏当前子菜单的逻辑之前,您可以隐藏每个子菜单(ul with class 'menu-sub')。 In this way, only the current submenu will be expanded.这样,只会展开当前的子菜单。 Here's the edited javascript code:这是经过编辑的 javascript 代码:
const submenuLinks = document.querySelectorAll('.has-submenu > a');
submenuLinks.forEach((element) =>
element.addEventListener('click', function (e) {
var allSubmenus = document.querySelectorAll('.menu-sub');
allSubmenus.forEach((submenu) => {
submenu.classList.remove(...submenu.classList);
submenu.classList.add('menu-sub');
submenu.classList.add('menu-hide');
});
var currentSubmenu = element.nextElementSibling;
if (currentSubmenu.classList.contains('menu-hide')) {
currentSubmenu.classList.add('menu-show');
currentSubmenu.classList.remove('menu-hide');
} else {
currentSubmenu.classList.add('menu-hide');
currentSubmenu.classList.remove('menu-show');
}
})
);
What I did there extra was to remove all the classes from the submenus, add back the 'menu-sub' and 'menu-hide' classes.我在那里额外做的是从子菜单中删除所有类,添加回“菜单子”和“菜单隐藏”类。
You must loop over all ul's to check the classes.您必须遍历所有 ul 以检查类。 I commented what i add to you js code.我评论了我添加给你的 js 代码。
const uls = document.querySelectorAll('.menu-sub');
uls.forEach(a => {
if (a.classList.contains('menu-show')) {
a.classList.remove('menu-show')
a.classList.add('menu-hide')
}
})
const submenuLinks = document.querySelectorAll('.has-submenu > a'); submenuLinks.forEach(element => element.addEventListener('click', function(e) { /* start */ const uls = document.querySelectorAll('.menu-sub'); uls.forEach(a => { if (a.classList.contains('menu-show')) { a.classList.remove('menu-show') a.classList.add('menu-hide') } }) /* end */ var submenu = element.nextElementSibling; if (submenu.classList.contains('menu-hide')) { submenu.classList.add('menu-show'); submenu.classList.remove('menu-hide'); } else { submenu.classList.add('menu-hide'); submenu.classList.remove('menu-show'); } }));
.menu-hide { display: none; }.menu-show { display: block; }
<nav> <ul class="menu"> <li> <a href="#">Menu Item 1</a> </li> <li class="has-submenu"> <a href="#">Menu Item 2 »</a> <ul class="menu-sub menu-hide"> <li><a href="#">Submenu Item 1</a></li> <li><a href="#">Submenu Item 2</a></li> <li><a href="#">Submenu Item 3</a></li> </ul> </li> <li class="has-submenu"> <a href="#">Menu Item 3 »</a> <ul class="menu-sub menu-hide"> <li><a href="#">Submenu Item 1</a></li> <li><a href="#">Submenu Item 2</a></li> <li><a href="#">Submenu Item 3</a></li> </ul> </li> </ul> </nav>
.menu-show
您可以使用 CSS 默认隐藏所有子菜单,只显示带有.menu-show
的子菜单Try this尝试这个
const submenuLinks = document.querySelectorAll('.has-submenu > a'); submenuLinks.forEach(element => element.addEventListener('click', function(e) { var submenu = element.nextElementSibling; if (submenu.classList.contains('menu-show')) { submenu.classList.remove('menu-show'); } else { submenuLinks.forEach(a => a.nextElementSibling.classList.remove('menu-show')); submenu.classList.add('menu-show'); } }));
.menu-sub { display: none; }.menu-show { display: block; }
<nav> <ul class="menu"> <li> <a href="#">Menu Item 1</a> </li> <li class="has-submenu"> <a href="#">Menu Item 2 »</a> <ul class="menu-sub"> <li><a href="#">Submenu Item 1</a></li> <li><a href="#">Submenu Item 2</a></li> <li><a href="#">Submenu Item 3</a></li> </ul> </li> <li class="has-submenu"> <a href="#">Menu Item 3 »</a> <ul class="menu-sub"> <li><a href="#">Submenu Item 1</a></li> <li><a href="#">Submenu Item 2</a></li> <li><a href="#">Submenu Item 3</a></li> </ul> </li> </ul> </nav>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.