Mengambil children di dom javascript

<li class="link-app">
            <a href="#" class="link">
              <i class="fa fa-cubes"></i>
              <span class="link-text">Menu 1</span>
            </a>
            <ul class="menu-nested">
              <li>
                <a href="#dp">Authors</a>
              </li>
            </ul>
          </li>

          <li class="link-app">
            <a href="#" class="link">
              <i class="fa fa-cubes"></i>
              <span class="link-text">Menu 2</span>
            </a>
            <ul class="menu-nested">
              <li>
                <a href="#dp">Authors 2</a>
              </li>
            </ul>
          </li>

$(function () {
  const parent = document.querySelectorAll('.link');
  const z = document.querySelectorAll('.link-app');
  [].forEach.call(parent ,function (r) {
    r.addEventListener('click', function (el) {
      if(this.nextElementSibling == null){
        return;
      }else if(this.nextEelementSibling.matches('.menu-nested'){
        this.nextElementSibling.classList.toggle('block')
      }
    })
  })
})

bagaiamana agar jika saya mengklik menu ke 2 maka menu pertama akan tertutup (jika masih ada class block nya) begitupun seterus nya jika masih ada menu lain yang mempunyai children class .menu-nested ?

sama hal nya jika dengan jquery

< Jquery >

    $(this).find('.menu-nested').toggleClass('block')
     const close = $(this).find('.menu-nested').add('block');
    $('.menu-nested').not(close).removeClass('block')

</ Jquery >

mohon untuk tidak menjawab nya dengan jquery lagi