JSFiddle - React, Tailwind, and code Playground

HTML

<nav class="menu-nav">
  <ul class="menu-list">
  <li class="menu-item"><span class="menu-toggle">Уровень 1</span>
      <ul class="sub-menu-list">
        <li class="menu-item"><span class="menu-toggle">Уровень 2 часть 1</span>
        <ul class="sub-menu-list">
          <li class="menu-item">Уровень 3 часть 1</li>
          <li class="menu-item">Уровень 3 часть 1</li>
        </ul>
        </li>
        <li class="menu-item"><span class="menu-toggle">Уровень 2 часть 2</span>
        <ul class="sub-menu-list">
          <li class="menu-item">Уровень 3 часть 2</li>
          <li class="menu-item">Уровень 3 часть 2</li>
        </ul>
        </li>
    </ul>
    </li>
  </ul>
</nav>

CSS

.sub-menu-list {
  display: none;
}
.sub-menu-list.sub-menu-list-shown {
  display: block;
}

JavaScript

document.addEventListener('click', e => {
	if (e.target.closest('.menu-toggle')) {
  	e.target.closest('.menu-item').querySelector('.sub-menu-list').classList.toggle('sub-menu-list-shown');
  }
});