【发布时间】：2019-09-19 23:55:45
【问题描述】：
我正在尝试将引导主题 (https://github.com/azouaoui-med/pro-sidebar-template) 集成到我的 rails 应用程序中，但我无法让侧边栏中的下拉菜单正常工作。 这似乎是一个 JQuery 问题，鉴于我对它很陌生，我很想得到一些意见。
这是我的chiller_theme.js 文件：
jQuery(function ($) {
$(".sidebar-dropdown > a").click(function() {
$(".sidebar-submenu").slideUp(200);
if (
$(this)
.parent()
.hasClass("active")
) {
$(".sidebar-dropdown").removeClass("active");
$(this)
.parent()
.removeClass("active");
} else {
$(".sidebar-dropdown").removeClass("active");
$(this)
.next(".sidebar-submenu")
.slideDown(200);
$(this)
.parent()
.addClass("active");
}
});
$("#close-sidebar").click(function() {
$(".page-wrapper").removeClass("toggled");
});
$("#show-sidebar").click(function() {
$(".page-wrapper").addClass("toggled");
});
});
还有我的application.js 文件：
//= require rails-ujs
//= require turbolinks
//= require Chart.bundle
//= require chartkick
//= require jquery3
//= require popper
//= require bootstrap
//= require Chart.bundle
//= require chartkick
//= require landing_page
//= require froala_editor.min.js
//= require plugins/font_family.min.js
//= require plugins/link.min.js
//= require chiller_theme.js
//= require_tree .
$(document).on("turbolinks:load",function(){
$('.tag-tooltip').tooltip();
})
$('selector').froalaEditor();
这是application.html.erb：
<!DOCTYPE html>
<html lang="en">
<head>
<%= render 'layouts/rails_default' %>
<%= render 'layouts/meta' %>
<%= render 'application/favicon' %>
</head>
<body id="top">
<div class="page-wrapper chiller-theme toggled">
<% if controller_name == 'lessons' && action_name == 'show' %>
<%= render 'layouts/lessons_header' %>
<% else %>
<%= render 'layouts/header' %>
<% end %>
<a id="show-sidebar" class="btn btn-sm btn-dark" href="#">
<i class="fas fa-bars"></i>
</a>
<nav id="sidebar" class="sidebar-wrapper">
<div class="sidebar-content">
<div class="sidebar-brand">
<a href="#">makers pro</a>
<div id="close-sidebar">
<i class="fas fa-times"></i>
</div>
</div>
<div class="sidebar-header">
<div class="user-pic">
<%= gravatar_for current_user %>
</div>
<div class="user-info">
<span class="user-name"><%= current_user.first_name + ' ' + current_user.last_name %>
</span>
<span class="user-role"><%= @shop.title %></span>
<!-- <span class="user-status">
<i class="fa fa-circle"></i>
<span>Online</span>
</span> -->
</div>
</div>
<!-- sidebar-header -->
<div class="sidebar-search">
<div>
<div class="input-group">
<input type="text" class="form-control search-menu" placeholder="Search Etsy">
<div class="input-group-append">
<span class="input-group-text">
<i class="fa fa-search" aria-hidden="true"></i>
</span>
</div>
</div>
</div>
</div>
<!-- sidebar-search -->
<div class="sidebar-menu">
<ul>
<li class="header-menu">
<span>General</span>
</li>
<li class="sidebar-dropdown">
<a href="#">
<i class="fa fa-tachometer-alt"></i>
<span>Dashboard</span>
<span class="badge badge-pill badge-warning">New</span>
</a>
<div class="sidebar-submenu">
<ul>
<li>
<a href="#">Dashboard 1
<span class="badge badge-pill badge-success">Pro</span>
</a>
</li>
<li>
<a href="#">Dashboard 2</a>
</li>
<li>
<a href="#">Dashboard 3</a>
</li>
</ul>
</div>
</li>
<li class="sidebar-dropdown">
<a href="#">
<i class="fa fa-shopping-cart"></i>
<span>E-commerce</span>
<span class="badge badge-pill badge-danger">3</span>
</a>
<div class="sidebar-submenu">
<ul>
<li>
<a href="#">Products
</a>
</li>
<li>
<a href="#">Orders</a>
</li>
<li>
<a href="#">Credit cart</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
<!-- sidebar-menu -->
</div>
<!-- sidebar-content -->
<div class="sidebar-footer">
<a href="#">
<i class="fa fa-bell"></i>
<span class="badge badge-pill badge-warning notification">3</span>
</a>
<a href="#">
<i class="fa fa-envelope"></i>
<span class="badge badge-pill badge-success notification">7</span>
</a>
<a href="#">
<i class="fa fa-cog"></i>
<span class="badge-sonar"></span>
</a>
<a href="#">
<i class="fa fa-power-off"></i>
</a>
</div>
</nav>
<!-- sidebar-wrapper -->
<main class="page-content">
<div class="container-fluid">
<%= yield %>
</div>
</main>
<!-- page-content" -->
<%= render 'layouts/footer' %>
</div>
<!-- page-wrapper -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<a href="#top" class="back-to-top"><%= icon('fas','angle-up') %></a>
</body>
</html>
对可能导致冲突的原因有任何想法吗？ 提前致谢！
【问题讨论】：
标签： jquery ruby-on-rails twitter-bootstrap bootstrap-4