Creé un menú de navegación con funciones de menú desplegable y múltiples y se produjeron algunos problemas. Intenté mejorar uno por uno y funcionó, pero ahora estoy confundido acerca de cómo es este. tal vez obtenga la respuesta aquí.

var dropdown = document.querySelectorAll('.LinkList ul li a'),
  getDropdown = dropdown.length;
for (var i = 0; i < getDropdown - 1; i++) {
  var menu = dropdown[i],
    menutext = menu.textContent;
  if (menutext.charAt(0) !== "_") {
    var submenu = dropdown[i + 1],
      submenutext = submenu.textContent;
    if (submenutext.charAt(0) === '_') {
      menu.insertAdjacentHTML('afterEnd', '<ul class="sub-menu m-sub"/>')
    }
  }
  if (menutext.charAt(0) === '_') {
    menu.textContent = menutext.replace('_', '')
    document.querySelectorAll('.sub-menu').forEach(el => {
      el.appendChild(menu.parentElement)
    })
  }
}
for (var i = 0; i < getDropdown - 1; i++) {
  var menu2 = dropdown[i],
    menutext2 = menu2.textContent;
  if (menutext2.charAt(0) !== '_') {
    var submenu2 = dropdown[i + 1],
      submenutext2 = submenu2.textContent;
    if (submenutext2.charAt(0) === '_') {
      menu2.insertAdjacentHTML('afterEnd', '<ul class="sub-menu2 m-sub"/>')
    }
  }
  if (menutext2.charAt(0) === '_') {
    menu2.textContent = menutext2.replace('_', '')
    document.querySelectorAll('.sub-menu2').forEach(el => {
      el.appendChild(menu2.parentElement)
    })
  }
}
document.querySelectorAll('.LinkList ul li ul').forEach(el => {
  el.parentElement.classList.add('has-sub')
})
<div class='main-nav'>
  <div class='LinkList'>
    <ul role='menubar'>
      <li><a href='#' role='menuitem'>Menu</a></li>
      <li><a href='#' role='menuitem'>Submenu</a></li>
      <li><a href='#' role='menuitem'>_Menu</a></li>
      <li><a href='#' role='menuitem'>_Multimenu</a></li>
      <li><a href='#' role='menuitem'>__Menu</a></li>
      <li><a href='#' role='menuitem'>__Menu</a></li>
      <li><a href='#' role='menuitem'>__Menu</a></li>
      <li><a href='#' role='menuitem'>_Menu</a></li>
      <li><a href='#' role='menuitem'>Submenu</a></li>
      <li><a href='#' role='menuitem'>_Menu</a></li>
      <li><a href='#' role='menuitem'>_Multimenu</a></li>
      <li><a href='#' role='menuitem'>__Menu</a></li>
      <li><a href='#' role='menuitem'>__Menu</a></li>
      <li><a href='#' role='menuitem'>__Menu</a></li>
      <li><a href='#' role='menuitem'>_Menu</a></li>
      <!-- if I add a regular menu, the menu with the text _menu will be moved -->
    </ul>
  </div>
</div>

Si agrego un menú regular, el menú con el texto _menu se moverá, lo quiero sin la necesidad de un menú regular nuevamente, entonces _menu se moverá a parrentElement automáticamente

0
CodingT 8 may. 2021 a las 01:36

1 respuesta

La mejor respuesta

El último li no se reconoce ya que sus bucles for se ejecutan una vez a menos debido a restar 1 del número de li i < getDropdown - 1. Elimina en ambos bucles for la resta i < getDropdown.

Como en cada bucle for ingresa el siguiente elemento con i + 1 (" submenú " o " submenu2 "), tiene un error para el último elemento (el código funciona aunque). Para deshacerse del error, puede usar un operador ternario ? (también podría ser una declaración if) para verificar si el elemento existe submenutext = submenu ? submenu.textContent : '';

Ejemplo de trabajo :

var dropdown = document.querySelectorAll('.LinkList ul li a'),
getDropdown = dropdown.length;
for (var i = 0; i < getDropdown; i++) {
  var menu = dropdown[i],
  menutext = menu.textContent;
  if (menutext.charAt(0) !== "_") {
    var submenu = dropdown[i + 1],
    submenutext = submenu ? submenu.textContent : '';
    if (submenutext.charAt(0) === '_') {
      menu.insertAdjacentHTML('afterEnd', '<ul class="sub-menu m-sub"/>')
    }
  }
  if (menutext.charAt(0) === '_') {
    menu.textContent = menutext.replace('_', '')
    document.querySelectorAll('.sub-menu').forEach(el => {
      el.appendChild(menu.parentElement)
    })
  }
}
for (var i = 0; i < getDropdown; i++) {
  var menu2 = dropdown[i],
  menutext2 = menu2.textContent;
  if (menutext2.charAt(0) !== '_') {
    var submenu2 = dropdown[i + 1],
    submenutext2 = submenu2 ? submenu2.textContent : '';
    if (submenutext2.charAt(0) === '_') {
      menu2.insertAdjacentHTML('afterEnd', '<ul class="sub-menu2 m-sub"/>')
    }
  }
  if (menutext2.charAt(0) === '_') {
    menu2.textContent = menutext2.replace('_', '')
    document.querySelectorAll('.sub-menu2').forEach(el => {
      el.appendChild(menu2.parentElement)
    })
  }
}
<div class='main-nav'>
  <div class='LinkList'>
    <ul role='menubar'>
      <li><a href='#' role='menuitem'>Menu</a></li>
      <li><a href='#' role='menuitem'>Submenu</a></li>
      <li><a href='#' role='menuitem'>_Menu</a></li>
      <li><a href='#' role='menuitem'>_Multimenu</a></li>
      <li><a href='#' role='menuitem'>__Menu</a></li>
      <li><a href='#' role='menuitem'>__Menu</a></li>
      <li><a href='#' role='menuitem'>__Menu</a></li>
      <li><a href='#' role='menuitem'>_Menu</a></li>
      <li><a href='#' role='menuitem'>Submenu</a></li>
      <li><a href='#' role='menuitem'>_Menu</a></li>
      <li><a href='#' role='menuitem'>_Multimenu</a></li>
      <li><a href='#' role='menuitem'>__Menu</a></li>
      <li><a href='#' role='menuitem'>__Menu</a></li>
      <li><a href='#' role='menuitem'>__Menu</a></li>
      <li><a href='#' role='menuitem'>_Menu</a></li>
      <!-- if I add a regular menu, the menu with the text _menu will be moved -->
    </ul>
  </div>
</div>
1
biberman 7 may. 2021 a las 23:44