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

Недавно я обновился до Bootstrap 4.0.0, я запускаю Rails 5.1.5 и установил BS, как указано в README в их github.

Кроме того, он был добавлен в package.json для пряжи.

В gemfile: gem 'bootstrap', '~> 4.0' gem 'jquery-rails'

В package.json: «bootstrap»: «^ 4.0.0», «popper.js»: «^ 1.12.9», «jquery»: «^ 3.3.0»

Я установил его в своем application.scss: @import "bootstrap";

Мое приложение / активы / javascripts / application.js:

//= require rails-ujs
//= require jquery3
//= require popper
//= require bootstrap-sprockets
//= require bootstrap
//= require_tree .

Теперь я пробую простой пример из онлайн-документа:

<div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" id="about-us" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        About Us
    </button>
    <div class="dropdown-menu" aria-labelledby="about-us">
        <a class="dropdown-item" href="#">Our Story</a>
        <a class="dropdown-item" href="#">Our Team</a>
        <a class="dropdown-item" href="#">Contact Us</a>
    </div>
</div>

Проблема в том, что когда я нажимаю кнопку, появляется меню, но если я нажимаю еще раз, оно не возвращается, и после этого я больше не могу его щелкать, это как замороженное.


ruby-on-rails yarnpkg drop-down-menu jquery bootstrap-4
person Neustrony    schedule 08.03.2018    source источник
comment
Пробовал на https://codepen.io, вроде все работает нормально   -  person Ganesh    schedule 09.03.2018

Ответы (2)


arrow_upward
1
arrow_downward

Попробуйте просто включить файлы сценария начальной загрузки непосредственно в свой HTML-файл, он должен сработать, и я думаю, это не должно быть проблемой для вас.

Вы можете получить их здесь https://getbootstrap.com/docs/4.0/getting-started/introduction/
Должно получиться так:

<!--Bootstrap CSS should be in head tag-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<!--Your dropdown-->
<div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" id="about-us" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        About Us
    </button>
    <div class="dropdown-menu" aria-labelledby="about-us">
        <a class="dropdown-item" href="#">Our Story</a>
        <a class="dropdown-item" href="#">Our Team</a>
        <a class="dropdown-item" href="#">Contact Us</a>
    </div>
</div>

<!--Bootstrap script files, they come at the end of your body tag-->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></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>


Вот рабочий JSFiddle с этими файлами: https://jsfiddle.net/c5bnsrsy/1/ < / а>

person Ejdrien    schedule 08.03.2018
comment
Это работает, когда я добавляю теги jquery и bootstrap script в конец моего applicationatoin.html. На самом деле это почти работает, первый клик неисправен, но после этого это ожидаемое поведение. Но большая проблема в том, что я не должен этого делать, у меня есть связщик и пряжа для помощи в управлении пакетами, они должны делать свою работу, почему это не работает? - person Neustrony; 09.03.2018
comment
У меня нет опыта работы с рельсами, но я обнаружил следующее: $ (document) .ready (function () {$ (. Dropdown-toggle) .dropdown ();}); Если вы поместите его в свой файл js, он должен работать ИЛИ добавьте в свой файл драгоценного камня: gem 'bootstrap-sass', затем запустите: bundle install, и тогда он должен работать - person Ejdrien; 09.03.2018
comment
Я удалил все ссылки на скрипты в своем application.html и просто добавил $ (document) .ready (function () {$ (. Dropdown-toggle) .dropdown ();}) в случайный файл js, и он отлично работает в первый щелчок. Это намного изящнее, но все же я думаю, что им следует управлять с помощью начальной загрузки или jquery. Странно то, что я могу использовать $ () из jquery, и я использую классы из Bootstrap 4, поэтому они здесь, но не полностью, это так странно, что Bootstap sass использует только Bootstrap 3, поэтому я удалил его из своего проекта, я где-то читал, что BS4 с самого начала построен с помощью sass, поэтому я получил это вместо - person Neustrony; 09.03.2018

arrow_upward
0
arrow_downward

Я только что добавил

$(document).ready(function() { $(".dropdown-toggle").dropdown(); })

в случайном файле js, и он отлично работает при первом нажатии

person Neustrony    schedule 12.10.2020