打开-关闭的Jquery嵌套菜单工作不正常

您好，我已经创建了一个子菜单与嵌套子菜单，但这工作良好，因为我的预期这里是这个菜单的html

<ul id="menu-main-menu">
    <li class="menu-item"><a href="link_url">text<a>
       <ul class="sub-menu">
         <li class="menu-item">
            <ul class="sub-menu">
               <li class="menu-item"><a href="link_url">second sub item<a></li>
            </ul>
         </li>
         <li class="menu-item"><a href="link_url">first sub item<a></li>
         <li class="menu-item"><a href="link_url">first sub item<a></li>
       </ul>
    </li>
   <li class="menu-item"><a href="link_url">text<a></li>
</ul>

问题是第一个子菜单打开很好，但当我想打开嵌套在第一个子菜单中的第二个子菜单时，这不会打开和关闭第一个子菜单。请帮我做这个

$('.menu-item').on('click',function (event) {
    if ($('.sub-menu', this).length >=1) {
        event.preventDefault();
    }
    $(".sub-menu").hide(); 
    $(this).find(".sub-menu").slideToggle(); // child
    event.stopPropagation();
})