スクロール時にブートストラップコラプスnavbarがモバイルで閉じるのを防ぐ

Question

モバイルデバイスで見ると折りたたみ可能な垂直ナビゲーションバーがあります。私は、ユーザーがスクロールした後でもナビゲーションバーを見続け、アイテムをクリックするか、またはnavトグルで閉じることができます。

Iは、（スタックオーバーフロー:)上のポストから）以下を試みた：

$('.sidebar-navbar-collapse').on({ 
    "show.bs.collapse": function() { this.closable = false;console.log('in show nav'); }, 
    "click":   function() { this.closable = true; console.log('in click to hide nav'); }, 
    "hide.bs.collapse": function() { return this.closable;console.log('in hide nav, closable:', this.closable); } 

}）。

しかし、表示されている&クリックの出力は表示されていますが、スクロールで閉じると非表示イベントは表示されません。

HTML：

<div class="col-md-4 col-sm-4 sidebar-nav"> 
    <div class="navbar" role="navigation"> 
     <h1 class='hidden-xs' style="border-bottom: 1px solid #ddd;">Topics</h1> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-navbar-collapse"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <span class="visible-xs navbar-brand">Topics</span> 
     </div> 
     <div class="navbar-collapse collapse sidebar-navbar-collapse"> 
      <ul class="nav navbar-nav" style="list-style:none; font-size: 16pt !important; font-family: תArial, sans-serif;" lang="HE"> 
      <li> 
       <a href="/faq/1" title="Privacy">Privacy</a> 
      </li> 
      <li> 
       <a href="/faq/2" title="Report">Report</a> 
      </li> 
      </ul>     
      <div class="clear"></div> 
    </div> 
</div> 

ここでは、JSフィドルです：

https://jsfiddle.net/bv773t0a/

ありがとうございました！

Answer 1

は当然あなたのmain.js内のBootstrap JavaScriptを使用して競合何かを持っている@ Karan3112

によって指摘しました。お試しください：

jQuery(".collapse.navbar-collapse.in").removeClass("in");