Как найти следующий ul при hover на ссылку?

Question

По структуре у меня есть menu и submenu:

<ul class ="menu">
<li class="menu__item"><a href="#" class = 'menu__link'>Menu with sub menu</a></li>
<ul class="submenu">
<li><a href ="#">sub link 1</a></li>
...

<li><a href ="#">sub link N</a></li>
</ul> 
</ul>

Как при hover на a.menu__link Найти в DOM ul.submenu?

Есть e.target.nextSibling; но он найдет только слудующую a.menu__link. Через

let links = document.querySelectorAll('.menu__link')
links.forEach (link => {
link.querySelector('ul.submenu'))
...
}

тоже не получить нужный ul так как он не внутри .menu__link а следующий за ней. И наконец document.querySelectorAll('ul.submenu') тоже не подходит, так как мне нужно работать только с тем submenu на ссылку которого навели.

Answer 1

NOTICE: чуть изменил html на более правильный. Когда что-то вложенное находится внутри элемента, а не сбоку...

let links = document.querySelectorAll('.menu__link')


links.forEach(link => {
    link.addEventListener('mouseover', (e) => {    
        e.target.closest('.menu__item').querySelector('.submenu').classList.add('test');
    });
    
    link.addEventListener('mouseleave', (e) => {    
        e.target.closest('.menu__item').querySelector('.submenu').classList.remove('test');
    });
});

.test {
    border: 3px solid black;
}

.menu__item {
    margin-top: 40px;
}

<ul class="menu">
  <li class="menu__item"><a href="#" class='menu__link'>Menu with sub menu</a>  
    <ul class="submenu">
      <li><a href="#">sub link 1</a></li>
      ...

      <li><a href="#">sub link N</a></li>
    </ul>
  </li>
  
    <li class="menu__item"><a href="#" class='menu__link'>Menu with sub menu 2</a>  
    <ul class="submenu">
      <li><a href="#">sub link 1</a></li>
      ...

      <li><a href="#">sub link N</a></li>
    </ul>
  </li>
  
    <li class="menu__item"><a href="#" class='menu__link'>Menu with sub menu 3</a>  
    <ul class="submenu">
      <li><a href="#">sub link 1</a></li>
      ...

      <li><a href="#">sub link N</a></li>
    </ul>
  </li>
</ul>

БЛОГ НА HUSL

Как найти следующий ul при hover на ссылку?

Ответы (1 шт):