jQuery window 调整大小显示按钮

Question

我做了一个简单的 jQuery 函数，当 window 的大小调整到小于 1000 时，会显示一个带有 class navbar-toggle 的按钮，并且class 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) 对导航栏使用标准 Bootstrap 语法

首先，简单地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允许修改移动导航栏断点：

Changing the collapsed mobile navbar breakpoint

The navbar collapses into its vertical mobile view when the viewport is narrower than $grid-float-breakpoint, and expands into its horizontal non-mobile view when the viewport is at least $grid-float-breakpoint in width. Adjust this variable in the Sass source to control when the navbar collapses/expands. The default value is 768px (the smallest "small" or "tablet" screen). This variable is defined in _variables.scss of Bootstrap and then used in _navbar.scss.

如果您使用 twbs/bootstrap-sass gem，覆盖 $grid-float-breakpoint 变量非常容易：

You can override variables by simply redefining a variable before the @import directive.

你的情况：

// File: app/assets/stylesheets/application.scss

// Point at which the navbar becomes uncollapsed
$grid-float-breakpoint: 1001px;

// import bootstrap as usual
@import "bootstrap";

jQuery window 调整大小显示按钮

jQuery window resize show button

html

ruby

jquery

erb

1) 对导航栏使用标准 Bootstrap 语法

2) 设置手机菜单断点为1000px

Changing the collapsed mobile navbar breakpoint