单击父级时如何使用jQuery切换子菜单

我做了一个下拉式垂直菜单，在故障排除后仍然无法弄清为什么子菜单切换无法正常工作。我将CSS子菜单设置为最初隐藏它，当单击父列表项时，我希望jQuery进行切换。当前，浏览器控制台中没有错误，但是切换无法正常进行。

任何帮助将不胜感激。谢谢！

jQuery：

$("li.menu-item-has-children .toggle").click(function(e){
  e.preventDefault();
  $(this).next('.submenu').toggle();

});

的HTML

<nav class="navigation">
                <ul class="menu nav-menu">
                  <li class="menu-item menu-item-has-children"><a href="#" class="menu-link main-menu-link">Logo
                    <span class="toggle">
                  <i class="fas fa-chevron-right"></i>
                    </span>

                  </a>
                  <ul class="submenu">
                    <li>sub list</li>
                  </ul>




                </li>
                  <li class="menu-item menu-item-has-children"><a href="#" class="menu-link main-menu-link">Fonts
                    <span class="toggle">
                  <i class="fas fa-chevron-right"></i>
                    </span>
                  </a></li>
                </ul>
              </nav>

CSS：

.nav-menu li.menu-item-has-children {
    position: relative;
}
.nav-menu li a{
  color: #0a0a0a;
    display: block;
    font-weight: 400;

    position: relative;
    padding: 10px 40px 10px 20px;
    font-size: .875rem;
    line-height: 1.25rem;

}
.nav-menu li.menu-item-has-children .toggle {
  position:absolute;
  right:0;
  transition: transform 400ms cubic-bezier(1,0,1,1),-webkit-transform 400ms cubic-bezier(1,0,1,1),-o-transform 400ms cubic-bezier(1,0,1,1);
}
 .submenu{
  display:none;
}