jQuery窗口调整大小显示按钮

Question

我制作了一个简单的 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 &amp; 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>

Answer 1

您似乎正在使用 Bootstrap。有两个步骤：1) 为导航栏使用标准 Bootstrap 语法和 2) 将移动菜单断点设置为 1000px。

1) 为导航栏使用标准引导语法

首先，只需adapt your code to fit the example in the Components: Navbar section。

在你的情况下，那将是：

<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 &amp; 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) 设置移动菜单断点为1000px

Bootstrap 允许你修改移动导航栏断点：

更改折叠的移动导航栏断点

当视口比 $grid-float-breakpoint 窄时，导航栏会折叠到其垂直移动视图中，当视口宽度至少为 $grid-float-breakpoint 时，导航栏会展开到其水平非移动视图。在 Sass 源中调整此变量以控制导航栏何时折叠/展开。默认值为 768px（最小的“小”或“平板”屏幕）。该变量在Bootstrap的_variables.scss中定义，然后在_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";