Question

我有一个带有ADMIN LTE（v2.3.8）Bootstrap模板文件的Rails（v5.1）应用程序。左侧边栏菜单的折叠功能不起作用。

toggleBtn的click事件监听器工作正常，因为当我点击它时会记录＆＃34;点击offcanvas＆＃34;在控制台中。此外，当我在点击toggleBtn时检查body标签时，它会突出显示，但不会按照它应该的那样切换＆＃39; sidebar-collapse＆＃39;类。

应用/资产/ Javascript角/ AdminLTE.js

$.AdminLTE.pushMenu = {
    activate: function (toggleBtn) {
      //Get the screen sizes
      var screenSizes = $.AdminLTE.options.screenSizes;

      //Enable sidebar toggle
      $(document).on('click', toggleBtn, function (e) {
        e.preventDefault();
          //Enable sidebar push menu
          console.log("Click on offcanvas")
        if ($(window).width() > (screenSizes.sm - 1)) {
          if ($("body").hasClass('sidebar-collapse')) {
              $("body").removeClass('sidebar-collapse').trigger('expanded.pushMenu');
          } else {
            $("body").addClass('sidebar-collapse').trigger('collapsed.pushMenu');
          }
        }
        //Handle sidebar push menu for small screens
        else {
          if ($("body").hasClass('sidebar-open')) {
            $("body").removeClass('sidebar-open').removeClass('sidebar-collapse').trigger('collapsed.pushMenu');
          } else {
            $("body").addClass('sidebar-open').trigger('expanded.pushMenu');
          }
        }
      });

      $(".content-wrapper").click(function () {
        //Enable hide menu when clicking on the content-wrapper on small screens
        if ($(window).width() <= (screenSizes.sm - 1) && $("body").hasClass("sidebar-open")) {
          $("body").removeClass('sidebar-open');
        }
      });

      //Enable expand on hover for sidebar mini
      if ($.AdminLTE.options.sidebarExpandOnHover
        || ($('body').hasClass('fixed')
        && $('body').hasClass('sidebar-mini'))) {
        this.expandOnHover();
      }
    },
    expandOnHover: function () {
      var _this = this;
      var screenWidth = $.AdminLTE.options.screenSizes.sm - 1;
      //Expand sidebar on hover
      $('.main-sidebar').hover(function () {
        if ($('body').hasClass('sidebar-mini')
          && $("body").hasClass('sidebar-collapse')
          && $(window).width() > screenWidth) {
          _this.expand();
        }
      }, function () {
        if ($('body').hasClass('sidebar-mini')
          && $('body').hasClass('sidebar-expanded-on-hover')
          && $(window).width() > screenWidth) {
          _this.collapse();
        }
      });
    },
    expand: function () {
      $("body").removeClass('sidebar-collapse').addClass('sidebar-expanded-on-hover');
    },
    collapse: function () {
      if ($('body').hasClass('sidebar-expanded-on-hover')) {
        $('body').removeClass('sidebar-expanded-on-hover').addClass('sidebar-collapse');
      }
    }
  };

的application.js

//= require rails-ujs
//= require jquery
//= require jquery-ui
//= require jquery_ujs
//= require bootstrap-sprockets
//= require AdminLTE
//= require turbolinks
//= require_tree .

application.html.erb

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <title>TrailerApp</title>
  <%= csrf_meta_tags %>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
 <%= javascript_include_tag 'https://maps.googleapis.com/maps/api/js?key=AIzaSyDrNW2yzxeYgYARA67ss3pX1p0yq7ZzFhI&libraries=places&language=es' %>
</head>
<body class="hold-transition skin-yellow">
  <div class="wrapper">
  <header class="main-header">
  <!-- Logo -->
  <a href="/" class="logo">
    <span class="logo-mini"><b>T</b>J</span>
    <span class="logo-lg"><b>Trailer</b>App</span>
  </a>

  <!-- Header Navbar -->
  <nav class="navbar navbar-static-top" role="navigation">
    <!-- Sidebar toggle button-->
    <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
      <span class="sr-only">Toggle navigation</span>
    </a>
    <!-- Navbar Right Menu -->
    <div class="navbar-custom-menu">
      <ul class="nav navbar-nav">
        ...
        <!-- Control Sidebar Toggle Button -->
        <li>
          <a href="#" data-toggle="control-sidebar"><i class="fa fa-gears"></i></a>
        </li>
      </ul>
    </div>
  </nav>
</header>
<aside class="main-sidebar">
  <section class="sidebar">
     ....
  </section>
</aside>

的Gemfile

...
gem 'bootstrap-sass', '~> 3.3', '>= 3.3.7'
gem 'font-awesome-rails', '~> 4.7', '>= 4.7.0.2'
gem 'jquery-rails', '~> 4.1', '>= 4.1.1'
gem 'jquery-ui-rails', '~> 6.0', '>= 6.0.1'
...

Answer 1

在我寻找与AdminLTE相关的问题时，我偶然发现了你的问题。我最近将AdminLTE框架移植到Rails框架，我想我已经解决了这个问题。

请查看Link

我知道你的答案有点晚了但我还是想回答它。希望它有所帮助

Rails App，Sidebar和Control侧栏中的ADMIN LTE II不会崩溃

1 个答案: