Bootstrap 3 移动视图上的侧边栏导航器 jquery

Question

我正在使用 RoR，有一件事让我感到困惑，也许我遗漏了一些东西，因为我已经构建了新的导航栏，并且该侧边栏仅在移动设备上显示，而不是在桌面上显示，并且运行良好。 Turbolink 已准备好运行。

  <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

然而，当我点击另一个页面时，侧边栏不再工作，它只显示折叠的下拉菜单，所以我必须再次刷新浏览器才能恢复侧边栏。

这是 sidebarNav.js 的代码，因为此代码在 application.js 要求

window.onload = function () {
    window.jQuery ? $(document).ready(function () {
        $(".sidebarNavigation .navbar-collapse").hide().clone().appendTo("body").removeAttr("class").addClass("sideMenu").show(), $("body").append("<div class='overlay'></div>"), $(".navbar-toggle").on("click", function () {
            $(".sideMenu").addClass($(".sidebarNavigation").attr("data-sidebarClass")), $(".sideMenu, .overlay").toggleClass("open"), $(".overlay").on("click", function () {
                $(this).removeClass("open"), $(".sideMenu").removeClass("open")
            })
        }), $(window).resize(function () {
            $(".navbar-toggle").is(":hidden") ? $(".sideMenu, .overlay").hide() : $(".sideMenu, .overlay").show()
        })
    }) : console.log("sidebarNavigation is working")
};

html.erb

中的导航代码

<!-- Static navbar -->
<nav class="navbar navbar-inverse navbar-default navbar-static-top navbar-margin-bottom sidebarNavigation"
    data-sidebarClass="navbar-inverse">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle left-navbar-toggle" data-toggle="collapse"
                data-target="#myNavbar" aria-expanded="false" aria-controls="myNavbar">
                <span class="sr-only">Toggle navigation</span>
            </button>
            <%= link_to root_path do %>
            <span>
                <%=  image_tag("youhire-logo-2.png", :alt => "youhire logo", :class =>"youhire-logo pull-left") %>
            </span>
            <% end %>
        </div>
        <div class="collapse navbar-collapse" id="myNavbar">
                <ul class="nav navbar-nav navbar-right">
                    <% if (!user_signed_in?)%>
                    <li><%= link_to t('help'), root_path %></li>
                    <% else %>
                    <li><% if current_user.role %> <%= link_to "List your equipment", new_tool_path %> <% end %></li>
                    <li><%= link_to t('help'), root_path %></li>
                    <% end %>

                    <% if (!user_signed_in?)%>
                    <li><%= link_to t('signup'), choice_path %></li>
                    <li><%= link_to t('login'), new_user_session_path %></li>
                    <% else %>
                    <li>
                        <%= link_to notifications_path do %>
                        <i class="fa fa-bell fa-2x"></i>
                        <span class="badge"
                            id="navbar_num_of_unread"><%= current_user.unread if current_user.unread > 0 %></span>
                        <% end %>
                    </li>

                    <li class="dropdown">
                        <% if current_user.role %>
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                            aria-expanded="false">
                            <%= current_user.company %>
                            <span class="caret"></span></a>
                        <% else %>
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                            aria-expanded="false">
                            <%= current_user.fullname %> <%= current_user.surname %>
                            <span class="caret"></span></a>
                        <% end %>
                        <ul class="dropdown-menu">
                            <li><%= link_to t('dashboard'), dashboard_path %></li>
                            <li><%= link_to t('toolrent'), your_tools_path %></li>
                            <li><%= link_to t('editprofile'), edit_user_registration_path %></li>
                            <li role="separator" class="divider"></li>
                            <li><% if current_user.role %><%= link_to t('addlisting'), new_tool_path %> <% end %>
                            </li>
                            <li><% if current_user.role %><%= link_to t('viewlisting'), tools_path %> <% end %></li>
                            <li><%= link_to "Orders received", reservations_tools_path %></li>
                            <li role="separator" class="divider"></li>
                            <li><%= link_to  t('logout'), destroy_user_session_path, method: :delete %></li>
                        </ul>
                    </li>
                    <% end %>
                </ul>
        </div>
    </div>
</nav>

我一定是漏了什么

Answer 1

从 window.onload 事件中取出 $(document).ready...

我怀疑您正在使用 AJAX 进行页面加载，因为 window.onload 仅在网站加载时执行一次，并且进一步的 AJAX 请求不会触发 window.onload 事件.

Bootstrap 3 移动视图上的侧边栏导航器 jquery

Bootstrap 3 Sidebar Navgivator on mobile view jquery

javascript

jquery

html

ruby-on-rails

turbolinks