Есть задача. У меня есть меню у которого есть заголовок и выпадающий список. Нужно у каждого заголовка в меню добавить кнопку и сделать так, чтобы меню выпадающее было скрыто изначально и раскрывалось только по клику на кнопку и расскрывались не все списки выпадающие, а только у конкретного заголовка.
Подскажите как такое сделать? Кнопку я добавил. меню перебрал, а как быть дальше не знаю. Всем спасибо.
<div class="sidebar-navigation">
<ul class="sidebar-navigation__list">
<li id="menu-item-2781" class="sidebar-title menu-item menu-item-type-custom menu-item-object-custom current-menu-ancestor current-menu-parent menu-item-has-children menu-item-2781">
<span class="navigation__link">
<a href="#">Заголовок</a>
</span>
<ul class="sub-menu">
<li class="menu-item menu-item-type-post_type menu-item-object-post">
<a href="#">123</a>
</li>
</ul>
</li>
<li id="menu-item-2781" class="sidebar-title menu-item menu-item-type-custom menu-item-object-custom current-menu-ancestor current-menu-parent menu-item-has-children menu-item-2781">
<span class="navigation__link">
<a href="#">Заголовок</a>
</span>
<ul class="sub-menu">
<li class="menu-item menu-item-type-post_type menu-item-object-post">
<a href="#">123</a>
</li>
</ul>
</li>
</ul>
</div>
<code lang="javascript">
const links = document.querySelectorAll('.navigation__link');
links.forEach(link => {
const btn = document.createElement('button');
btn.textContent = "Кнопка";
link.appendChild(btn);
});
function func() {
this.className = 'sub-menu';
}
for(let i=0; i<links.length; i++){
links[i].onclick = func;
}
</code>
