Как при нажатие на li выводить ul список?

Question

[12Vadim12]

<ul class="mobile__nav-ul">
              <li class="mobile__nav-li"><a href="#" ">Маркетинг</a>
              <ul class="mobile-ul-marketing">
                <li class="mobile-li-marketing"><a href="#">Интернет-маркетинг</a></li>
                <li class="mobile-li-marketing"><a href="#">Контент-маркетинг</a></li>
                <li class="mobile-li-marketing"><a href="#">Первофманск маркетинг</a></li>
                <li class="mobile-li-marketing"><a href="#">PR</a></li>
              </ul>
            </li>
              <li class="mobile__nav-li"><a href="#">Backend-разработчики</a>
                <ul class="mobile-ul-marketing">
                  <li class="mobile-li-marketing"><a href="#">Интернет-маркетинг</a></li>
                  <li class="mobile-li-marketing"><a href="#">Контент-маркетинг</a></li>
                  <li class="mobile-li-marketing"><a href="#">Первофманск маркетинг</a></li>
                  <li class="mobile-li-marketing"><a href="#">PR</a></li>
                </ul>
              </li>
              <li class="mobile__nav-li"><a href="#">Дизайнеры</a>
                <ul class="mobile-ul-marketing">
                  <li class="mobile-li-marketing"><a href="#">Интернет-маркетинг</a></li>
                  <li class="mobile-li-marketing"><a href="#">Контент-маркетинг</a></li>
                  <li class="mobile-li-marketing"><a href="#">Первофманск маркетинг</a></li>
                  <li class="mobile-li-marketing"><a href="#">PR</a></li>
                </ul>
              </li>
              <li class="mobile__nav-li"><a href="#">Менеджеры по продажам</a>
                <ul class="mobile-ul-marketing">
                  <li class="mobile-li-marketing"><a href="#">Интернет-маркетинг</a></li>
                  <li class="mobile-li-marketing"><a href="#">Контент-маркетинг</a></li>
                  <li class="mobile-li-marketing"><a href="#">Первофманск маркетинг</a></li>
                  <li class="mobile-li-marketing"><a href="#">PR</a></li>
                </ul>
              </li>
              <li class="mobile__nav-li mobile-more"><a href="#">Ещё</a>
                <i class="fa fa-angle-down mobile-icon" aria-hidden="true"></i>
              </li>
            </ul>

Submenu();
function Submenu(event){
const containerBurger = event.target.closest('.mobile__nav-li');
const menuLi = containerBurger.querySelector('.mobile__nav-li a');
menuLi.addEventListener('click', function(){
  document.querySelector('.mobile-ul-marketing').classList.toggle('active');
})
}

Comments

[Ankhena]

Гуглить "javascript accordeon".

[ProjectSoft]

.mobile-ul-marketing {
  height: 0px;
  overflow: hidden;
}
.mobile__nav-li.active .mobile-ul-marketing {
  height: auto;
}

function subMenu(){
  const lia = document.querySelectorAll('.mobile__nav-li > a');
  lia.forEach(function(a, b, c){
    a.addEventListener('click', function(e){
      e.preventDefault();
      this.parentNode.classList.toggle('active');
      return !1;
    })
  })
}
subMenu();