我做了一个简单的jQuery函数,当窗口的大小调整到小于1000时,显示一个类为navbar-toggle
的按钮,并隐藏一个类为navbar-nav
的无序列表(这是导航)。
问题是,当按钮被显示,导航条被隐藏,按钮实际上没有功能,因为它应该-提供一个下拉列表。只是需要帮助,使这个按钮实际工作,因为它应该
jQuery功能:$(window).resize(function() {
if ($(window).width() < 1000) {
$(".navbar-toggle").show();
$(".navbar-nav").hide();
} else {
// do nothing
}
});
HTML/ERB: <div class="navbar navbar-inverse navbar-static-top">
<div class="container">
<a class="navbar-brand" href="http://localhost:3000">Buy & Sell</a>
<button class="navbar-toggle" data-toggle="collapse" data-target="#navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse" id="navHeaderCollapse">
<ul class="nav navbar-nav">
<li><%= link_to "All Items", root_path %></li>
<% Category.all.each do |category| %>
<li><%= link_to category.name, items_path(category: category.name) %></li>
<% end %>
</ul>
<% if user_signed_in? %>
<ul class="nav navbar-nav navbar-right">
<li><%= link_to "New Item", new_item_path %></li>
<li><%= link_to "Account", edit_user_registration_path %></li>
<li><%= link_to "Sign Out", destroy_user_session_path, method: :delete %></li>
</ul>
<% else %>
<ul class="nav navbar-nav navbar-right">
<li><%= link_to "Sign Up", new_user_registration_path %></li>
<li><%= link_to "Log In", new_user_session_path %></li>
</ul>
<% end %>
</div>
</div>
</div>
看起来你正在使用Bootstrap。有两个步骤:1)使用导航条的标准Bootstrap语法;2)将移动菜单的断点设置为1000px。
1)使用导航条的标准Bootstrap语法
首先,简单地调整你的代码以适应Components: Navbar部分中的示例。
在你的例子中,应该是:
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navHeaderCollapse" aria-expanded="false">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://localhost:3000">Buy & Sell</a>
<div class="collapse navbar-collapse" id="navHeaderCollapse">
<ul class="nav navbar-nav">
<li><%= link_to "All Items", root_path %></li>
<% Category.all.each do |category| %>
<li><%= link_to category.name, items_path(category: category.name) %></li>
<% end %>
</ul>
<% if user_signed_in? %>
<ul class="nav navbar-nav navbar-right">
<li><%= link_to "New Item", new_item_path %></li>
<li><%= link_to "Account", edit_user_registration_path %></li>
<li><%= link_to "Sign Out", destroy_user_session_path, method: :delete %></li>
</ul>
<% else %>
<ul class="nav navbar-nav navbar-right">
<li><%= link_to "Sign Up", new_user_registration_path %></li>
<li><%= link_to "Log In", new_user_session_path %></li>
</ul>
<% end %>
</div>
</div>
</div>
你的不需要自定义jQuery代码!Bootstrap将自动为您处理移动菜单的切换!
2)设置移动菜单断点为1000pxBootstrap允许你修改移动导航条的断点:
更改折叠的移动导航条断点
当视口宽度小于$grid-float-breakpoint时,导航栏折叠成垂直移动视图,当视口宽度大于$grid-float-breakpoint时,导航栏扩展成水平非移动视图。在Sass源代码中调整此变量以控制导航条何时折叠/展开。默认值为768px(最小的"或";tablet"屏幕)。这个变量在_variables中定义。scss的Bootstrap,然后在_navbar.scss.
如果你正在使用twbs/bootstrap-sass gem,很容易覆盖$grid-float-breakpoint
变量:
你可以通过在@import指令之前重新定义变量来覆盖变量。
在你的例子中:
// File: app/assets/stylesheets/application.scss
// Point at which the navbar becomes uncollapsed
$grid-float-breakpoint: 1001px;
// import bootstrap as usual
@import "bootstrap";