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);  }

}）;

但是当我看到显示的＆amp;的输出时点击，当滚动关闭隐藏事件时，我看不到它。

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>

这是一个小提琴：

https://jsfiddle.net/bv773t0a/

谢谢！

Answer 1

@ Karan3112正确指出

您的main.js内的Bootstrap Javascript存在冲突。尝试：

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

滚动时阻止Bootstrap折叠导航栏在移动设备上关闭

1 个答案: