Rails + JQuery侧栏下拉菜单立即关闭

时间：2019-05-01 11:55:36

标签： jquery ruby-on-rails twitter-bootstrap bootstrap-4

我正在尝试将引导程序主题（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 个答案:

答案 0 :(得分：2)

  

在您的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中，并检查它是否可以按预期工作。 因为您需要在页面加载时隐藏这些子菜单。

相关问题
最新问题