如何创建导航李单击事件以在子菜单上添加/删除类

Question

我正在调整WordPress菜单，以便我可以创建自己的导航，但是在移动设备上显示我的子菜单时已经毫无疑问。您可以在此JSfiddle上看到，当您悬停在主菜单项上时，它显示了子菜单，但当然在移动设备上不起作用。

菜单的结构为

<ul class="navigation__list">
 <li class="navigation__link"><a>Main Menu Item</a>
  <ul class="navigation_item--submenu">
   <li class="navigation__link"><a>Sub Menu Item</a>
   <li class="navigation__link"><a>Sub Menu Item</a>
   <li class="navigation__link"><a>Sub Menu Item</a>
   <li class="navigation__link"><a>Sub Menu Item</a>
  </ul>
     
   

js小提琴

jQuery(document).ready(function(){
 jQuery(".navigation__list li ").click(function () {
  if(jQuery(".navigation__link ul li").hasClass('show-menu')){
    jQuery(".navigation__link ul li").removeClass('show-menu')
  }else{
    jQuery(".navigation__link ul li").addClass('show-menu');
  }
 });
});

我想要实现的是navigation__list li ons navigation__list li click lig它相关的Ul Li出现了，但是由于我尝试的JSFIDDLE无法正常工作，我确实迷失了如何实现这一目标。

任何帮助都将在如何构建jQuery上，因此可以做到我想要的。

非常感谢