简体   繁体   中英

Bootstrap 3 Sidebar Navgivator on mobile view jquery

I am using RoR and one thing baffles me, maybe I'm missing something, as I have built new navbar, and this sidebar display on mobile only, not in desktop and it's working fine prefect. Turbolink is ready to function.

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

在此处输入图片说明

however when I click on another page through and the sidebar is no longer working, it shows only collapsed dropdown, so I have to refresh the browser again to get sidebar back.

在此处输入图片说明

Here is code for sidebarNav.js as this code is on the application.js require

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")
};

Nav code in 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>

I must be missing something

Take the $(document).ready out of the window.onload event...

I suspect you are using AJAX for your page loads, because window.onload is only executed once when the website loads, and further AJAX requests do not trigger the window.onload event.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM