Question

汉堡包不会在Rails的移动视图中切换...

我从模板获得的滑轨中的导航栏按钮存在问题。导航栏按钮切换，但是它将响应单击事件和已被单击的控制台日志。

该模板似乎在浏览器中运行良好，但是一旦出现故障，它便无法正常工作。我已将代码添加到主app.js文件中，以查看这是否是资产管道问题，并且为简洁起见，因为模板随附的js文件长30k行

我尝试打开和关闭Turbolink。控制台日志显示，jquery正在响应click事件，但是导航栏仍然不会切换，因此似乎可以很好地访问代码。在chrome中调试js效果不佳，因为在步进时将click事件传递给了某些父元素和子元素。


//
//= require jquery
//= require jquery_ujs
//= require rails-ujs
//= require page
//= require script
//= require popper
//= require bootstrap
//= require activestorage
//= require_tree .


 /**
  * page is the main js file, loaded from vendor/assets
 */


$(document).on('ready turbolinks:load', function() {
    page.initNavbar = function() {

        /**
         * Toggle navbar
         */
        $(document).on('click', '.navbar-toggler', function() {
          page.navbarToggle();
          console.log("navbar licked")
        });


        /**
         * Tapping on the backdrop will close the navbar
         */
        $(document).on('click', '.backdrop-navbar', function() {
          page.navbarClose();
        });


        /**
         * Toggle menu open on small screen devices
         */
        $(document).on('click', '.navbar-open .nav-navbar > .nav-item > .nav-link', function() {
          $(this).closest('.nav-item').siblings('.nav-item').find('> .nav:visible').slideUp(333, 'linear');
          $(this).next('.nav').slideToggle(333, 'linear');
        });

      }


      page.navbarToggle = function() {
        var body   = page.body,
            navbar = page.navbar;

        body.toggleClass('navbar-open');
        if (body.hasClass('navbar-open')) {
          navbar.prepend('<div class="backdrop backdrop-navbar"></div>');
        }
      }

      page.navbarClose = function() {
        page.body.removeClass('navbar-open');
        $('.backdrop-navbar').remove();
      }

});

erb

<nav class="navbar navbar-expand-lg navbar-light navbar-stick-dark" data-navbar="smart">
      <div class="container">

        <div class="navbar-left mr-4">
          <button class="navbar-toggler" type="button">&#9776;</button>
          <a class="navbar-brand" href="#">
          <%= link_to root_url do %>
           <% if controller_name == "home" %>
            <%= image_tag 'uproar-light.png', class: 'navbar-brand'%>
            <% else %>
            <%= image_tag 'uproar-dark.png', class: 'navbar-brand'%>
              <% end %>
            <% end %>
          </a>
        </div>

        <section class="navbar-mobile">
          <nav class="nav nav-navbar mr-auto">
            <a class="nav-link active" href="#home">Home</a>
            <a class="nav-link" href="#section-features">Features</a>
            <a class="nav-link" href="#section-pricing">Pricing</a>
            <a class="nav-link" href="#">Resources</a>
            <a class="nav-link" href="#">Contact</a>
          </nav>

          <div class="d-none d-stick-block">
            <a class="btn btn-sm btn-light ml-lg-5 mr-2" href="#">Login</a>
            <a class="btn btn-sm btn-success" href="#">Sign up</a>
          </div>
        </section>

      </div>
    </nav>

Answer 1

经过一番混乱之后，我终于通过将javascript include标签放在页脚中来使导航栏工作。

看起来像包含在主题中的JS才能最后加载才能正常工作。这是Rails外部的典型情况，但是我发现可以异步加载javascript，而不必烦恼Turbolinks。

<%= javascript_include_tag "application", async: true %>

添加了异步：对每个javascript标签均为true，并且切换有效。将include标记移回标题。

模板中的汉堡导航栏切换无法在轨道上工作

1 个答案: