防止引导程序崩溃导航栏在滚动时关闭移动设备

我有一个垂直导航栏，在移动设备中查看时可以折叠。我希望我的用户能够在滚动后继续看到导航栏，只需点击某个项目或导航栏上的按钮即可关闭导航栏。防止引导程序崩溃导航栏在滚动时关闭移动设备

我试过以下（从堆栈溢出后:)）：

$('.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/

谢谢！

来源

2017-02-14 hgolov

给我们创建一个JSFiddle？ –

@GuruTom - 我创建了一个并将其添加到问题中。谢谢！ – hgolov

您的main.js中有一个脚本与引导脚本冲突。 'jQuery（“。collapse.navbar-collapse.in”）。removeClass（“in”）;' – karan3112

正确指出的@ Karan3112

你有你的main.js内冲突的东西与引导的JavaScript。试试：

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

来源

2017-02-15 12:16:44

我真的很想给@ Karan3112，但是因为他没有回答，所以我将它授予你。谢谢！ – hgolov

防止引导程序崩溃导航栏在滚动时关闭移动设备

回答

相关问题