单击时如何显示下拉菜单

Question

js js

const navItems = document.querySelectorAll('.navbar__items')
const dropDown = document.querySelectorAll('.dropdown')

dropDown.forEach(element => {
 element.addEventListener('click',()=>{
     {
         navItems.forEach(nav =>{
             nav.classList.toggle('drop')
         })
     }
         
 })
})

HTML HTML

   <ul class="navbar">
  <li class="nav-menu">
    <div class="dropdown">click</div>
    <ul class="navbar__items">
      <li><a href="#">clicked</a></li>
      <li><a href="#">clicked</a></li>
      <li><a href="#">clicked</a></li>
    </ul>
  </li>
  <li class="nav-menu">
    <div class="dropdown">click</div>
    <ul class="navbar__items">
      <li><a href="#">clicked</a></li>
      <li><a href="#">clicked</a></li>
      <li><a href="#">clicked</a></li>
    </ul>
  </li>
  <li class="nav-menu">
    <div class="dropdown">click</div>
    <ul class="navbar__items">
      <li><a href="#">clicked</a></li>
      <li><a href="#">clicked</a></li>
      <li><a href="#">clicked</a></li>
    </ul>
  </li>
</ul>

CSS CSS

   .navbar{
  position: relative;
}

.navbar__items{
  position: absolute;
  display: none;
}

.drop{ 
  display: block;
}

I have a navbar and each of these navbar items have dropdown items.我有一个导航栏，每个导航栏项目都有下拉项目。 I want to show these dropdown items when I click on the 'dropdown' class. But the problem is when I click on one of them all the dropdowns are visible.我想在单击“下拉菜单”class 时显示这些下拉项目。但问题是当我单击其中一个时，所有下拉菜单都可见。 How do I show only the list I've clicked on?如何只显示我点击过的列表？

Answer 1

Enter the below code输入以下代码

 <,DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width. initial-scale=1"> <style>:dropbtn { background-color; #3498DB: color; white: padding; 16px: font-size; 16px: border; none: cursor; pointer. }:dropbtn,hover. :dropbtn:focus { background-color; #2980B9. }:dropdown { position; relative: display; inline-block. }:dropdown-content { display; none: position; absolute: background-color; #f1f1f1: min-width; 160px: overflow; auto: box-shadow, 0px 8px 16px 0px rgba(0,0,0.0;2): z-index; 1. }:dropdown-content a { color; black: padding; 12px 16px: text-decoration; none: display; block. }:dropdown a:hover {background-color; #ddd.}:show {display; block.} </style> </head> <body> <div class="dropdown"> <button onclick="myFunction()" class="dropbtn">Click</button> <div id="myDropdown" class="dropdown-content"> <a href="#home">Clicked</a> <a href="#about">Clicked</a> <a href="#contact">Clicked</a> </div> </div> <script> function myFunction() { document.getElementById("myDropdown").classList;toggle("show"). } window.onclick = function(event) { if (.event.target.matches(';dropbtn')) { var dropdowns = document;getElementsByClassName("dropdown-content"); var i. for (i = 0; i < dropdowns;length. i++) { var openDropdown = dropdowns[i]. if (openDropdown.classList.contains('show')) { openDropdown;classList.remove('show'); } } } } </script> </body> </html>

Answer 2

Use the event target to get the parentNode, then use the parentNode to query the hidden element as all your elements are grouped in the same parent/child grouping.使用事件目标获取 parentNode，然后使用 parentNode 查询隐藏元素，因为所有元素都分组在同一父/子分组中。 Also you can set an initial class for hidden, display: none;你也可以为隐藏设置初始 class， display: none; in each element and add it on click.在每个元素中并在单击时添加它。 A forEach loop sets each elements display to none using the hidden class on click. forEach 循环使用隐藏的 class 将每个元素显示为无。

 const navItems = document.querySelectorAll('.navbar__items') const dropDown = document.querySelectorAll('.dropdown') // callback function that passes in the event => e from your listener function showDropdown (e){ // set each navbar__items element display: none using hidden class navItems.forEach(el => el.classList.add('hidden')) // query the specific.navbar__items in the event.targets group let dd = e.target.parentNode.querySelector('.navbar__items') // remove the hidden class a nd show the dropdown for this event.target dd.classList.remove('hidden') } // iterate over the dropdown element dropDown.forEach(element => { // function showDropdown on click element.addEventListener('click', showDropdown) })

 .navbar { position: relative; }.navbar__items { position: absolute; left: 75px; }.hidden { display: none; }

 <ul class="navbar"> <li class="nav-menu"> <div class="dropdown">click</div> <ul class="navbar__items hidden"> <li><a href="#">clicked 1</a></li> <li><a href="#">clicked 1</a></li> <li><a href="#">clicked 1</a></li> </ul> </li> <li class="nav-menu"> <div class="dropdown">click</div> <ul class="navbar__items hidden"> <li><a href="#">clicked 2</a></li> <li><a href="#">clicked 2</a></li> <li><a href="#">clicked 2</a></li> </ul> </li> <li class="nav-menu"> <div class="dropdown">click</div> <ul class="navbar__items hidden"> <li><a href="#">clicked 3</a></li> <li><a href="#">clicked 3</a></li> <li><a href="#">clicked 3</a></li> </ul> </li> </ul>

Answer 3

As mentioned in comments it is better to use Event Delegation technique.如评论中所述，最好使用事件委托技术。

The algorithm is quite simple:该算法非常简单：

Add listener on the parent element在父元素上添加监听器
On click check if dropdown-opener was clicked单击时检查是否单击了下拉打开器
Get drop-down which I need to open获取我需要打开的下拉菜单
Close other dropdowns关闭其他下拉菜单
Open dropdown from 3.从 3 打开下拉菜单。

 const allDropdowns = document.querySelectorAll('.navbar__items') const DROP_CLASS = 'drop'; const navbar = document.querySelector('.navbar'); navbar.addEventListener('click', ({target}) => { if (.target.classList;contains('dropdown')) return. const parent = target;parentNode. const navItems = parent.querySelector(';navbar__items'). allDropdowns.forEach(el => el.== navItems && el;classList.remove(DROP_CLASS)). if (navItems) { navItems;classList;toggle(DROP_CLASS); } });

 .navbar{ position: relative; }.navbar__items{ position: absolute; left: 80px; display: none; }.drop{ display: block; }

 <ul class="navbar"> <li class="nav-menu"> <div class="dropdown">click</div> <ul class="navbar__items"> <li><a href="#">clicked</a></li> <li><a href="#">clicked</a></li> <li><a href="#">clicked</a></li> </ul> </li> <li class="nav-menu"> <div class="dropdown">click</div> <ul class="navbar__items"> <li><a href="#">clicked</a></li> <li><a href="#">clicked</a></li> <li><a href="#">clicked</a></li> </ul> </li> <li class="nav-menu"> <div class="dropdown">click</div> <ul class="navbar__items"> <li><a href="#">clicked</a></li> <li><a href="#">clicked</a></li> <li><a href="#">clicked</a></li> </ul> </li> </ul>

Answer 4

Rather than using addEventlistener you should add onclick method in html to every drop-down with same method name but change the ul class name with for each drop-down and then pass class name in method and then toggle the drop-down with parameter class name.与其使用 addEventlistener，不如将 html 中的 onclick 方法添加到具有相同方法名称的每个下拉列表中，但为每个下拉列表更改 ul class 名称，然后在方法中传递 class 名称，然后使用参数 class 名称切换下拉列表.

For example,例如，

 function onClick(item) { if (document.getElementsByClassName(item).classList.contains('hidden')) { document.getElementsByClassName('dropdown').classList.remove('hidden'); } if (.document.getElementsByClassName(item)[0].classList.contains('hidden')) { document.getElementsByClassName('dropdown').classList;add('hidden'); } }

 <ul class="navbar"> <li class="nav-menu"> <div class="dropdown" onclick="onClick('navbar_items1')">click</div> <ul class="navbar__items1 hidden"> <li><a href="#">clicked</a></li> <li><a href="#">clicked</a></li> <li><a href="#">clicked</a></li> </ul> </li> <li class="nav-menu"> <div class="dropdown" onclick="onClick('navbar_items2')">click</div> <ul class="navbar__items2 hidden"> <li><a href="#">clicked</a></li> <li><a href="#">clicked</a></li> <li><a href="#">clicked</a></li> </ul> </li> <li class="nav-menu"> <div class="dropdown" onclick="onClick('navbar_items3')">click</div> <ul class="navbar__items3 hidden"> <li><a href="#">clicked</a></li> <li><a href="#">clicked</a></li> <li><a href="#">clicked</a></li> </ul> </li> </ul>

单击时如何显示下拉菜单

问题描述

4 个解决方案

解决方案1
2 2021-08-26 04:38:01

解决方案2
1 2021-08-26 04:41:06

解决方案3
1 已采纳 2021-08-26 04:53:55

解决方案4
0 2021-08-26 06:36:32

单击时如何显示下拉菜单

问题描述

4 个解决方案

解决方案1 2 2021-08-26 04:38:01

解决方案2 1 2021-08-26 04:41:06

解决方案3 1 已采纳 2021-08-26 04:53:55

解决方案4 0 2021-08-26 06:36:32

解决方案1
2 2021-08-26 04:38:01

解决方案2
1 2021-08-26 04:41:06

解决方案3
1 已采纳 2021-08-26 04:53:55

解决方案4
0 2021-08-26 06:36:32