[解決済み] Bootstrapのレスポンシブメニューを "クリック "で閉じる

質問

PRODUCTS"をクリックすると、白いdivがスライドアップされます（添付のとおり）。 レスポンシブ（モバイル、タブレット）の場合、レスポンシブのナビバーを自動的に閉じて、白いバーだけを表示させたいと思っています。

試してみました。

$('.btn-navbar').click();  

も試してみました。

$('.nav-collapse').toggle();

そして、それは動作します。しかし、デスクトップサイズでも呼び出され、メニューが一瞬縮むという変なことになってしまいます。

何かアイデアはありますか？

どのように解決するのですか？

アニメーションが動くようになりました。

htmlでのメニューです。

<div id="nav-main" class="nav-collapse collapse">
     <ul class="nav">
         <li>
             <a href='#somewhere'>Somewhere</a>
         </li>
     </ul>
 </div>

ナビゲーションのすべてのa要素のクリックイベントを、メニューの折りたたみにバインドする（Bootstrap collapse plugin）。

 $(function(){ 
     var navMain = $("#nav-main");
     navMain.on("click", "a", null, function () {
         navMain.collapse('hide');
     });
 });

EDIT より一般的にするために、以下のコードスニペットを使用することができます。

 $(function(){ 
     var navMain = $(".navbar-collapse"); // avoid dependency on #id
     // "a:not([data-toggle])" - to avoid issues caused
     // when you have dropdown inside navbar
     navMain.on("click", "a:not([data-toggle])", null, function () {
         navMain.collapse('hide');
     });
 });