移动视图jquery上的Bootstrap 3 Sidebar Navgivator

Posted 2023-05-09

【中文标题】移动视图jquery上的Bootstrap 3 Sidebar Navgivator

【英文标题】：Bootstrap 3 Sidebar Navgivator on mobile view jquery

【发布时间】：2020-01-11 08:35:21

【问题描述】：

我正在使用 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>

我一定是错过了什么

【参考方案1】：

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

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

【讨论】：

是的，你说得对，这是我的雷达中的一个失误。菜鸟错误。谢谢