Look at this HTML structure

<ul class="block-navigation" id="sidebar-navigation">
  <li class="block-navigation-item">
    <a href="#">Parent Menu Item 1</a>
  </li>
  <li class="block-navigation-item">
    <a href="#">Parent Menu Item 2</a>
  </li>
  <li class="block-navigation-item has-child current-menu-item block-navigation-submenu">
    <a class="open-submenu" href="#">
      Parent Menu Item 3
      <em></em>
    </a>
    <ul class="-block-navigation-submenu">
      <li class="block-navigation-item"><a href="#">Policy and Planning</a></li>
      <li class="block-navigation-item"><a href="#">Policy and Planning</a></li>
      <li class="block-navigation-item"><a href="#">Policy and Planning</a></li>
    </ul>
  </li>
</ul>

Now I need to make submenu collapsible when click on <em> element inside <a>..

This is how I tried it in jQuery

$("#sidebar-navigation li.block-navigation-submenu > a > em").on('click', function(e) {
   e.preventDefault();   
   $(this)
    .parent().parent('li')
    .addClass('testing-1')
    .find('.wp-block-navigation-submenu')
    .addClass('testing-2')
    .slideToggle();
});

When executing above code it gives an error as below..

Uncaught TypeError:
$(…).parent().parent(…).addClass(…).find(…).addClass(…).slideUp
is not a function

Hope somebody may help me out..