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）使用导航栏的标准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允许您修改移动导航栏断点：

  

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

     

当视口比$ 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";