Question

我正在尝试将this sidebar添加到我的rails项目中，似乎与我的Js和提供的js冲突。

因此，当我单击侧栏下拉菜单时，它的关闭速度与打开时一样快..... 我在一个新的Rails应用程序中尝试了该代码，并且该代码正在运行...所以我猜我的应用程序有些混乱，但是我找不到。浏览器控制台中没有错误...

我像这样在app/assets/sidebar.js中包装了js代码：

$(document).on('turbolinks:load', function() {
  jQuery(function ($) {

  $(".sidebar-dropdown > a").click(function() {
    $(".sidebar-submenu").slideUp(200);
    if (
      $(this)
        .parent()
        .hasClass("active")
    ) {
      $(".sidebar-dropdown").removeClass("active");
      $(this)
        .parent()
        .removeClass("active");

        alert("I am in the if");
    } else {
      $(".sidebar-dropdown").removeClass("active");
      $(this)
        .next(".sidebar-submenu")
        .slideDown(200);
      $(this)
        .parent()
        .addClass("active");

        alert("I am in the else"); // this alert is working when i click
    }
  });

  $("#close-sidebar").click(function() {
    $(".page-wrapper").removeClass("toggled"); // this is working when i click
  });
  $("#show-sidebar").click(function() {
    $(".page-wrapper").addClass("toggled"); // this is working when i click
  });

});

});

在我的app/assets/application.js中，我有：

//= require jquery
//= require rails-ujs
//= require jquery3
//= require popper
//= require bootstrap-sprockets
//= require turbolinks
//= require cocoon
//= require highcharts
//= require chartkick
//= require_tree

在app/javascript/components/packs/application.js中，我有：

// Support component names relative to this directory:
var componentRequireContext = require.context("components", true)
var ReactRailsUJS = require("react_ujs")
ReactRailsUJS.useContext(componentRequireContext)
import flatpickr from 'flatpickr'
import 'flatpickr/dist/flatpickr.min.css'
import { French } from "flatpickr/dist/l10n/fr.js"

flatpickr(".datepicker",{
    altInput: true,
    "locale": French

});

在app / views / layouts / aplication.html.erb

中

<!DOCTYPE html>
<html>
  <head>
    <title>SuperShop</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <link href="https://fonts.googleapis.com/css?family=Montserrat:100,300,400" rel="stylesheet">    
    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= stylesheet_pack_tag    'application' %>
    <%#= javascript_include_tag "https://maps.googleapis.com/maps/api/js?libraries=places&key=#{ENV['GOOGLE_API_BROWSER_KEY']}" %>

    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <%= render "admin/shared/menu" %>
    <%= render "layouts/admin/admin_nav" %>
    <%= render "layouts/shared/flashes" %>  
    <%= yield %>
    <%= javascript_pack_tag 'application' %> <!-- doit etre en dessous de turbolink -->
    <!-- !!!!!! Il faut laisser les javascript_tags sous le yield si non probleme de react--> 
  </body>
</html>

Bootstrap下拉菜单不起作用，可能是jquery和webpacker之间的冲突？

0 个答案: