单击链接后，jQuery下拉菜单不会缩小

Question

我希望菜单在用户单击链接后消失。这是一个响应式的网页网站，因此，单击链接后，用户将向下滚动到相关内容。

单击后如何自动隐藏菜单？

HTML：

$(document).ready(function() { 
    $(".menu-icon").on("click", function() { 
        $("nav ul").toggleClass("showing"); 
    }); 
}); 

$("ul li").click(function() { 
    $("ul ul").slideUp(); 
    $(this).find('ul').stop().slideToggle(); 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<nav>
    <div class="menu-icon">
        <i class="fa fa-bars fa-2x"></i>
    </div>

    <div class="logo">
        <img src="img/AC LOGO.png" alt="logo">
    </div>

    <div class="menu">
        <ul>
            <li><a href="#about">Par mums</a></li>
            <li><a href="#prices">Cenrādis</a></li>
            <li><a href="#school">Kartinga treniņi</a></li>
            <li><a href="#galery">Galerija</a></li>
            <li><a href="#events">Korporatīvie pasākumi</a></li>
            <li><a href="#contact">Kontakti</a></li>
        </ul>
    </div>
</nav>