Javascript子菜单问题

免责声明。。。我并不真正热衷于前端开发。 我有一个导航菜单，它有两个子菜单。我使用的是Symfony3框架，因此twig也参与其中。我的基本模板有导航代码，所以它应该可以在所有扩展小枝页面上使用。这是html

<ul class="nav">
    <!-- Main menu -->
    <li class="current"><a href="{{ path('admin_dashboard') }}"><i class="glyphicon glyphicon-th"></i> Dashboard</a>
    </li>
    <li><a href="{{ path('contact_emails') }}"><i class="glyphicon glyphicon-stats"></i> Emails</a></li>
    <li><a href="{{ path('users_table') }}"><i class="glyphicon glyphicon-user"></i> Users</a></li>
    <li class="submenu">
        <a href="#">
            <i class="glyphicon glyphicon-list"></i> Admin
            <span class="caret pull-right"></span>
        </a>

        <ul>
            <li><a href="{{ path('admin_profile') }}"><i class="glyphicon glyphicon-user"></i> My Profile</a></li>
            <li><a href="{{ path('fos_user_change_password') }}">Change Password</a></li>
        </ul>
    </li>
    <li class="submenu">
        <a href="#">
            <i class="glyphicon glyphicon-list"></i> Public Pages
            <span class="caret pull-right"></span>
        </a>

        <ul>
            <li><a href="{{ path('homepage') }}">Home Page</a></li>
            <li><a href="{{ path('about_page') }}">About</a></li>
            <li><a href="{{ path('services_page') }}">Services</a></li>
            <li><a href="{{ path('contact_page') }}">Contact</a></li>

        </ul>
    </li>
    <li><a href="{{ path('fos_user_security_logout') }}">Logout</a></li>
</ul>

谢谢你的帮助

$(".submenu > a").click(function(e) {
    e.preventDefault();
    var $li = $(this).parent("li");
    var $ul = $(this).next("ul");

    if($li.hasClass("open")) {
        $ul.slideUp(350);
        $li.removeClass("open");
    } else {
        $(".nav > li > ul").slideUp(350);
        $(".nav > li").removeClass("open");
        $ul.slideDown(350);
        $li.addClass("open");
    }
});