触发菜单在切换后关闭？

Question

所以，我现在正在开发一个投资组合网站，我的菜单/导航设备有些问题。

我有一些锚点，我有smoothScroll。 js，它看起来好一点。但问题是，单击标签后菜单不会自动关闭。

我是js的绝对菜鸟，获得一些帮助会很高兴:) 我已经尝试过这样做了，但我只隐藏整个菜单部分^^＆＃39;

这是我的脚本和HTML。

$(document).ready(function() {
  $("#not").click(function() {
    $("#not-sub-nav").toggle(200);
    $("#main-menu").hide(500);
  });
  $(".sub-back").click(function() {
    $("#not-sub-nav").hide(200);
  });
  $("#menu-btn").click(function() {
    $("#haff-menu").toggleClass("showHalfMenu");
    $("#main-menu").toggle();
  });
});



<section class="showHalfMenu" id="haff-menu">
        <div class="container-fluid">
            <!--=======SLID-NAV 1============-->
            <section id="nav-1">
                <nav id="main-nav">
                    <h2 class="title"><a href="javascript:;">
               <span class="menu-icon pull-right" id="menu-btn"><i class="fa fa-bars" aria-hidden="true" id="chang-menu-icon"></i></span></a></h2>
                    <ul class="ul" id="main-menu">
                        <li id="#">
                            <a href="#about" class="smoothScroll">
                                <i class="fa fa-user icon" aria-hidden="true"></i>about
                            </a>
                        </li>
                        <li id="#">
                            <a href="#">
                                <i class="fa fa-image icon"></i>projects
                            </a>
                        </li>
                        <li id="#">
                            <a href="#">
                                <i class="fa fa-graduation-cap icon"></i>experience
                            </a>
                        </li>                       
                        <li>
                            <a href="#">
                                <i class="fa fa-address-card icon"></i>contact
                            </a>
                        </li>
                    </ul>
                </nav>
            </section>

        </div>
    </section>