Rails + JQuery 侧边栏下拉菜单立即关闭
Posted
技术标签:
【中文标题】Rails + JQuery 侧边栏下拉菜单立即关闭【英文标题】：Rails + JQuery sidebar dropdown closes immediately 【发布时间】：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>
对可能导致冲突的原因有任何想法吗？ 提前致谢！
【问题讨论】：
【参考方案1】：在您的 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" style="display: none;">
<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" style="display: none;">
<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>
将内联 css style="display: none;" 添加到类 sidebar-submenu 并检查它是否可以按预期工作。
因为您需要在页面加载时隐藏这些子菜单。
【讨论】：
没用。它在页面加载时关闭，但是一旦您单击它展开，它就会立即关闭。有什么想法吗？ 哦..我刚刚复制了您的代码并在我的系统上进行了尝试..它有效..您能详细说明您的问题并添加更多代码以便我可以调试吗？ 谢谢 :) 这是我的视频：loom.com/share/fe7d501ce28b41c8adc1efbeaf0a4be8。它发生在两个不同的设备上，都在 Firefox 和 chrome 上，您还需要什么其他代码？ 我看到了你分享的视频。我的意思是另一个 JS 正在影响你的代码。尝试单击下拉菜单在控制台中打印任何内容，并确保它没有单击两次.. @MaayanNaveh Prashant 是对的。我在我的应用程序中集成了多次布局。您正在导入的 js 文件可能会导致一些问题，有时连接到 turbolinks，有时连接到样式。因此，对这些资产一一注释并测试应用程序，一旦发现该资产破坏了您的功能，请注释代码并找到问题以上是关于Rails + JQuery 侧边栏下拉菜单立即关闭的主要内容，如果未能解决你的问题，请参考以下文章