Выпадающие списки Bootstrap не переключаются с новым макетом рельсов

Я реализовал новый макет рельсов, и я не могу заставить работать раскрывающиеся списки из меню навигации. Выпадающее меню на главной странице (другой макет) работает нормально. У меня загружен jquery, но явно что-то не загружается в правильном порядке для этого макета, поскольку он не переключается.

Макет, который работает, имеет этот «application.js»:

//= require jquery
//= require popper
//= require rails-ujs
//= require bootstrap
//= require_tree ./common

Макет, который не работает, имеет этот 'stack.js'

//= require jquery
//= require popper
//= require rails-ujs
//= require bootstrap
//= require stack/vendors/vendors.min
//= require stack/vendors/charts/raphael-min
//= require stack/vendors/charts/morris.min
//= require stack/vendors/extensions/unslider-min
//= require stack/vendors/timeline/horizontal-timeline
//= require stack/core/app-menu
//= require stack/core/app
//= require stack/scripts/pages/dashboard-ecommerce
//= require_tree ./common

Общие файлы — это файлы js для конкретных страниц, которые необходимы в обоих макетах.

Вот фрагмент из раскрывающегося списка, который работает:

  <% if user_signed_in? %>
  <ul class="navbar-nav ml-auto">
    <li class="nav-item dropdown">
    <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button">
      <span class="glyphicon glyphicon-user">
        <%= current_user.name %>
      </span>
      <b class="caret"></b>
    </a>
    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
      <%= link_to( t(:profile), user_path(current_user), class:"dropdown-item") %>
      <div class="divider"></div>
      <%= link_to("Log out", destroy_user_session_path, method: :delete, class:"dropdown-item") %>
    </div>
    </li>
  </ul>
<% end %>

Вот фрагмент навигации нового макета, который не работает:

  <li class="dropdown dropdown-user nav-item"><a class="dropdown-toggle nav-link dropdown-user-link" href="#" data-toggle="dropdown"><span class="avatar avatar-online"><%= image_tag('stack/portrait/small/avatar-s-1.png')%><i></i></span><span class="user-name"><%= current_user.name %></span></a>
    <div class="dropdown-menu dropdown-menu-right">
      <a class="dropdown-item" href="#"><i class="ft-user"></i> Edit Profile</a>
      <a class="dropdown-item" href="#"><i class="ft-mail"></i> My Inbox</a><a class="dropdown-item" href="user-cards.html"><i class="ft-check-square"></i> Task</a>
      <a class="dropdown-item" href="#"><i class="ft-message-square"></i> Chats</a>
      <div class="dropdown-divider"></div>
      <%= link_to('Logout', destroy_user_session_path, method: :delete, class: "dropdown-item") %>
    </div>
  </li>

applicacion.scss (работает только макет дисков)

 @import "bootstrap";

stack.scss (макет дисков, выпадающие списки которого не работают):

///FILES IMPORTED FROM VENDOR.CSS///
@import 'bootstrap';

@import 'stack/fonts/feather/style';
@import 'stack/fonts/font-awesome/css/font-awesome';
@import 'stack/fonts/flag-icon-css/css/flag-icon';
@import 'stack/vendors/extensions/pace';
//// END FILES IMPORTED FROM VENDOR.CSS ///

@import 'stack/fonts/meteocons/style';
@import 'stack/vendors/extensions/unslider';
@import 'stack/vendors/charts/morris';

//FILES THAT WERE BEING IMPORTED BY APP.CSS

@import "stack/bootstrap-extended";
@import "stack/colors";
@import "stack/components";

////////

@import 'stack/core/menu/menu-types/vertical-menu';
@import 'stack/fonts/simple-line-icons/style';
@import 'stack/core/colors/palette-gradient';
@import 'stack/pages/timeline';
@import 'style';

Я попытался изменить порядок загрузки js bootstrap в stack.js, но безуспешно. Я пытался исправить это в течение последних 2 дней, но у меня нет идей. Я использую Рельсы 5.2. Есть предположения?


ruby-on-rails jquery twitter-bootstrap ruby-on-rails-5.2
person Andrea    schedule 19.02.2019    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Ответ будет зависеть от используемой вами версии бутстрапа. Если вы используете загрузчик 4, удалите все теги require из файла application.scss.

person shafrazi    schedule 19.02.2019
comment
Я использую bootstrap 4. Однако у меня есть bootstrap, включенный в application.scss (который управляет только одним макетом), и он работает нормально. Обновлено выше с подробностями scss - person Andrea; 19.02.2019

arrow_upward
0
arrow_downward

Я понял это. Некоторые JS в шаблоне уже загружали jquery, поэтому, загружая его в файлы layout.js, а затем и в скрипты (в некоторых случаях), это вызывало проблемы.

person Andrea    schedule 19.02.2019