Javascript 如何使用bootstrap 4折叠中等大小屏幕的导航栏内容

我已经使用Bootstrap4Alpha创建了一个导航栏，并希望使用☰ （汉堡包菜单）在中等大小屏幕上查看站点/页面时

到目前为止，两个☰ （汉堡包菜单）和导航栏内容在我使用中等大小的浏览器窗口加载页面时显示。

理想情况下，我希望在页面加载时隐藏导航栏列表项，只显示汉堡包菜单，然后单击汉堡包菜单后显示列表项。如果再次单击，我想隐藏项目

所讨论的代码如下所示， \u nav.html.erb

<nav class="navbar navbar-full navbar-light bg-faded">
  <button class="navbar-toggler hidden-md-down" type="button" data-toggle="collapse" data-target="#nav-content">
    ☰
  </button>
  <div class="collapse navbar-toggleable-md" id="nav-content">
  <a class="navbar-brand" href="http://example.io">example.io</a>
  <ul class="nav navbar-nav">

<% if user_signed_in? %>

    <li class="nav-item"><a class="nav-link"<%= link_to current_user.email, edit_user_registration_path %></li>
    <li class="nav-item"><a class="nav-link"<%= link_to "Logout", destroy_user_session_path, method: :delete %></li>
    <% else %>

    <li class="nav-item">
    <a class="nav-link"<%= link_to "Sign Up", new_user_registration_path%>
    </li>

    <li class="nav-item"><a class="nav-link"<%= link_to "Login", new_user_session_path %>
    </li>

    <% end %>


    <li class="nav-item">
      <a class="nav-link" href="#">Gallery</a>
    </li>

    <li class="nav-item"><a class="nav-link"<%= link_to "About", about_path %></a>
    </li>

    <li class="nav-item">
      <a class="nav-link"<%= link_to "Contact", contact_path %></a>
    </li>

    <li class="nav-item">
      <a class="nav-link" href="#"><i class="fa fa-upload"></i> Uplodad Image</a>
    </li>

  </ul>
  <div class="form-inline pull-xs-right">
  <form class="input-group">
    <input class="form-control" type="text" placeholder="Search for...">
    <span class="input-group-btn">
    <button class="btn btn-success-outline" type="submit">
      <i class="fa fa-search"></i>
    </button>
    </span>
  </form>
</div>
</div>
</nav>

☰






对
\u nav.html.erb的以下更改解决了我的问题

<nav class="navbar navbar-full navbar-light bg-faded">
  <button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" data-target="#nav-content">
    ☰ example.io
  </button>
  <div class="collapse navbar-toggleable-md" id="nav-content">
  <a class="navbar-brand" href="http://example.io">example.io</a>
  <ul class="nav navbar-nav">


☰ example.io

由于汉堡菜单需要三种不同的状态，因此需要使用JavaScript来实现这一点。如果只有两个，你就可以不用黑客了。