Así que tengo una navegación lateral que tiene un submenú en parte de la lista, y trato de mostrar el submenú solo cuando se hace clic en él.
Aquí está el HTML
<div class="sidebar"> <ul class="nav"> <li class="main-menu" onclick="dispDrop()"><a href="">Item 1</a> <ul class="sub-menu"> <li><a href="">Sub-item 1</a></li> <li><a href="">Sub-item 1</a></li> <li><a href="">Sub-item 1</a></li> <li><a href="">Sub-item 1</a></li> </ul> </li> <li><a href="">Item 2</a></li> <li><a href="">Item 3</a></li> <li class="main-menu" onclick="dispDrop()"><a href="">Item 4</a> <ul class="sub-menu"> <li><a href="">Sub-item 1</a></li> <li><a href="">Sub-item 1</a></li> <li><a href="">Sub-item 1</a></li> <li><a href="">Sub-item 1</a></li> </ul> </li> <li><a href="">Item 5</a></li> <li><a href="">Item 6</a></li> </ul> </div>Aquí está su CSS
.nav ul { display: none; position: relative; padding: 0px; } .nav li.active ul { display: block; }Aquí está el javascript
<script type="text/javascript"> const navItem = document.querySelector('.main-menu'); function dispDrop() { navItem.classList.toggle("active"); } </script>Al principio funcionaba bien, pero cuando agregué un submenú a otra lista, comenzó a fallar y no mostró el submenú.
¿Hay alguna manera de apuntar solo al <li> en el que se hizo clic y solo agregar/alternar la clase a ese <li> en el que se hizo clic?
Lo que puede hacer es agregar this a onclick="dispDrop()"
Y luego haz lo siguiente.
function dispDrop(obj) { obj.classList.toggle("active"); }Manifestación
function dispDrop(obj) { obj.classList.toggle("active"); } .nav ul { display: none; position: relative; padding: 0px; } .nav li.active ul { display: block; } <div class="sidebar"> <ul class="nav"> <li class="main-menu" onclick="dispDrop(this)"><a href="#">Item 1</a> <ul class="sub-menu"> <li><a href="">Sub-item 1</a></li> <li><a href="">Sub-item 1</a></li> <li><a href="">Sub-item 1</a></li> <li><a href="">Sub-item 1</a></li> </ul> </li> <li><a href="">Item 2</a></li> <li><a href="">Item 3</a></li> <li class="main-menu" onclick="dispDrop(this)"><a href="#">Item 4</a> <ul class="sub-menu"> <li><a href="">Sub-item 1</a></li> <li><a href="">Sub-item 1</a></li> <li><a href="">Sub-item 1</a></li> <li><a href="">Sub-item 1</a></li> </ul> </li> <li><a href="">Item 5</a></li> <li><a href="">Item 6</a></li> </ul> </div>Algunos problemas que he identificado se enumeran a continuación.
navItem como document.querySelector('.main-menu') . Esto siempre devolverá el primer elemento DOM con ese nombre de clase. No es su objetivo requerido.Lo arreglé alternando la lista de clases del elemento de destino desde el clic activado. Esto le dará el objetivo requerido donde se activa el clic.
Llame e.preventDefault(); e.stopPropagation(); dentro del evento de clic para detener el evento de clic que activa el evento de clic de la etiqueta de anclaje.
violín de trabajo
function dispDrop(e) { e.currentTarget.classList.toggle("active"); e.preventDefault(); e.stopPropagation(); } .nav ul { display: none; position: relative; padding: 0px; } .nav li.active ul { display: block; } <div class="sidebar"> <ul class="nav"> <li class="main-menu" onclick="dispDrop(event)"> <a href="">Item 1</a> <ul class="sub-menu"> <li><a href="">Sub-item 11</a></li> <li><a href="">Sub-item 11</a></li> <li><a href="">Sub-item 11</a></li> <li><a href="">Sub-item 11</a></li> </ul> </li> <li><a href="">Item 2</a></li> <li><a href="">Item 3</a></li> <li class="main-menu" onclick="dispDrop(event)"> <a href="">Item 4</a> <ul class="sub-menu"> <li><a href="">Sub-item 12</a></li> <li><a href="">Sub-item 12</a></li> <li><a href="">Sub-item 12</a></li> <li><a href="">Sub-item 12</a></li> </ul> </li> <li><a href="">Item 5</a></li> <li><a href="">Item 6</a></li> </ul> </div>Reescribo un poco tu código. El problema se produce desde el ancla. Puedes
elimine el ancla y estilo la etiqueta li para tener la sensación de ancla (cursor: puntero, etc.) o
agregas un # a tu href. que evitará seguir el enlace
Luego paso con su evento onclick el objeto clickent actual. Entonces eventHandler sabe en qué elemento se hizo clic.
function dispDrop(event) { event.querySelector('ul').classList.toggle("hide"); } .nav ul { position: relative; padding: 0px; } .hide { display: none; position: relative; } <div class="sidebar"> <ul class="nav"> <li class="main-menu" onclick="dispDrop(this)"> <a href="#">Item 1</a> <ul class="sub-menu hide"> <li><a href="">Sub-item 1</a></li> <li><a href="">Sub-item 1</a></li> <li><a href="">Sub-item 1</a></li> <li><a href="">Sub-item 1</a></li> </ul> </li> <li><a href="#">Item 2</a></li> <li><a href="#">Item 3</a></li> <li class="main-menu clicki" onclick="dispDrop(this)"> <a href="#">Item 4</a> <ul class="sub-menu hide"> <li><a href="#">Sub-item A </a></li> <li><a href="#">Sub-item 1</a></li> <li><a href="#">Sub-item 1</a></li> <li><a href="#">Sub-item 1</a></li> </ul> </li> <li><a href="#">Item 5</a></li> <li><a href="#">Item 6</a></li> </ul> </div>