我有一个Rails(v5.1(应用程序，其中包含ADMIN LTE(v2.3.8(引导模板文件。左侧边栏菜单的折叠功能不起作用。
toggleBtn的点击事件监听器工作正常，因为当我点击它时，它会在控制台中记录"点击offcanvas"。此外，当我点击toggleBtn检查body标签时，它会突出显示，但不会像预期的那样切换"sidebar-collapse"类。
app/assets/javascripts/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'
...
我在查找AdminLTE相关问题时偶然发现了您的问题。我最近一直在将AdminLTE框架移植到Rails框架中，我想我已经解决了这个问题。
请查看链接
我知道你的回答有点晚了，但无论如何我只是想回答。希望它能帮助