Предотвращение перезагрузки Bootstrap от закрытия на мобильном телефоне при прокрутке

Question

У меня есть вертикальная навигационная панель, которая становится разборной при просмотре на мобильных устройствах. Я хочу, чтобы мои пользователи продолжали видеть навигационную панель даже после ее прокрутки, и только ее можно закрыть, нажав на элемент или на навигационном переключателе.

Я попробовал следующее (с поста на переполнение стека :)):

$('.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); } 

});

Но пока я вижу вывод для показанного изображения &, я не вижу его для события hide, когда он закрыт прокруткой.

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

Справедливо указывал @ Karan3112

У вас есть что-то конфликтующие с Bootstrap Javascript в пределах вашего main.js. Попытка:

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