可点击的导航与子导航？

Question

我有这个导航结构：

<nav class="navbar navbar-top mod_navigation " >
    <div class="ws-navbar-collapse pull-left">
        <ul class="nav navbar-nav">
            <li class="submenu mega ncol-3 first nav-item dropdown subnav">
                <a class="" href="url" >
                    <span itemprop="name">Lösungen</span>
                </a>

                <div class="subnav-container">
                    <div class="relative">
                        <ul class="nav sub-nav level-2">
                            <li class="submenu first subnav">
                                <a class=" " href="url" >
                                    <span itemprop="name">Digitalisierung</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</nav>

我想从此页面获得点击效果： https://www.invisionapp.com/

我已经使用此js脚本尝试过，但是无法正常工作

$('ul li.nav-item').on('click', function() {
    if(!$('.subnav-container').is(':visible')){
        $(".subnav-container" ).slideDown();
        var $this = $(this);
        $this.toggleClass('is-active').children('ul').toggleClass('is-visible');
    } else {
        $(".subnav-container" ).slideUp();
        var $this = $(this);
        $this.toggleClass('is-active').children('ul').toggleClass('is-visible');
    }
});

因此，如果主导航点的类别为“ submenu”，则子导航“ subnav-container”应在单击时向下滑动。