为什么我必须单击我的汉堡菜单两次才能打开它？

Question

我单击汉堡包，下拉菜单。我单击一个选择（例如：联系人），菜单关闭，然后向下滚动到联系人部分（在同一页面上）。然后，我再次单击“汉堡包”按钮（好像我想去其他地方），没有任何明显反应。我第二次单击它，这一次，菜单再次打开。

很明显，我希望它在我第一次单击时打开。这是我的HTML和Javascript。我正在使用Bootstrap 4，因此其他任何相关代码都可能内置在Bootstrap中。

 <!-- Navbar -->
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
    <div class="container">
        <div id="home-nav" class="nav-item">
            <div class="nav-link"><img class="logo-name" src=./public/images/logo-name.png alt="Name Logo">
            </div>
        </div>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="collapsibleNavbar">
            <ul class="nav navbar-nav w-100 justify-content-center">
                <li id="portfolio-nav" class="nav-item">
                    <div class="nav-link">Portfolio</div>
                </li>
                <li id="about-nav" class="nav-item">
                    <div class="nav-link">About</div>
                </li>
                <li id="contact-nav" class="nav-item">
                    <div class="nav-link">Contact</div>
                </li>
            </ul>
        </div>
    </div>
</nav>

/////////////////////////

 $('.navbar-collapse div').click(function(){ 
        $('.navbar-collapse').css('height', '0');
        $('.navbar-collapse').removeClass('in');
      });