Javascript 如何将 .nextElementSibling 应用于下拉菜单的下一项

发布于05月22日

我有一个包含子项的菜单，当我单击它们时，它会弹出显示项的窗口.我设法打开了第一个项目，但第二个项目我做不到.我想用.nextElementSibling来做这个，但我做不到.我做错了什么？

var dropdownBtn = document.querySelector('.menu-btn');

dropdownBtn.addEventListener('click',()=>{
var menuContent = document.querySelector('.drop_container');
    menuContent.classList.toggle("show");
  
})

.menu-btn {
  background: #e0e0e0;
  padding: 10px;
  margin: 5px 0px 0px 0px;
}

.menu-btn:hover {
  background: #000;
  color: #fff;
}


.drop_container {
   display: none;
   background-color: #017575;
   transition: 0.3s;
   opacity: 0;
}

.drop_container.show {
  display: contents;
  visibility: visible;
  opacity: 1;
}

.drop_container > .item {
  display: flex;
  flex-direction: column;
  margin-left: 10px;
  padding: 10px 0px 0px 0px;
}

<div class="dropdown-menu">

<div class="menu-btn">One</div>
<div class="drop_container">
  <a class="item" href="#">Contact Us</a>
  <a class="item" href="#">Visit Us</a>
</div>

<div class="menu-btn">Two</div>
<div class="drop_container">
  <a class="item" href="#">Contact Us</a>
  <a class="item" href="#">Visit Us</a>
</div> 

</div>

const dropdownBtn = document.querySelectorAll('.menu-btn'); dropdownBtn.forEach(btn => btn.addEventListener('click', function() { const menuContent = this.nextElementSibling; menuContent.classList.toggle("show"); }));

.menu-btn { background: #e0e0e0; padding: 10px; margin: 5px 0px 0px 0px; } .menu-btn:hover { background: #000; color: #fff; } .drop_container { display: none; background-color: #017575; transition: 0.3s; opacity: 0; } .drop_container.show { display: contents; visibility: visible; opacity: 1; } .drop_container>.item { display: flex; flex-direction: column; margin-left: 10px; padding: 10px 0px 0px 0px; }

<div class="dropdown-menu"> <div class="menu-btn">One</div> <div class="drop_container"> <a class="item" href="#">Contact Us</a> <a class="item" href="#">Visit Us</a> </div> <div class="menu-btn">Two</div> <div class="drop_container"> <a class="item" href="#">Contact Us</a> <a class="item" href="#">Visit Us</a> </div> </div>

Javascript 如何将 .nextElementSibling 应用于下拉菜单的下一项

推荐答案

Javascript相关问答推荐

我无法使用tailwind-css和reactJS修改图像的位置

添加/删除时React图像上传重新渲染上传的图像

根据总价格对航班优惠数组进行排序并检索前五个结果- Angular HTTP请求

我在这个黑暗模式按钮上做错了什么？

每次子路由重定向都会调用父加载器函数

单击ImageListItemBar的IconButton后，在Material—UI对话框中显示图像

当作为表达式调用时，如何解析方法decorator 的签名？

阿波罗返回的数据错误，但在网络判断器中是正确的

编剧如何获得一个div内的所有链接，然后判断每个链接是否都会得到200？

IF语句的计算结果与实际情况相反

为什么我的getAsFile()方法返回空？

在Java中寻找三次Bezier曲线上的点及其Angular

MarkLogic-earch.suggest不返回任何值

try 使用PM2在AWS ubuntu服务器上运行 node 进程时出错

如何限制显示在分页中的可见页面的数量

使用父标签中的Find函数查找元素

有没有一种直接的方法可以深度嵌套在一个JavaScript对象中？

React：防止useContext重新渲染整个应用程序或在组件之间共享数据而不重新渲染所有组件

JWT Cookie安全性

使用可配置项目创建网格