Почему мое выпадающее меню с Bootstrap не работает?

В моем приложении Rails у меня есть следующий код для выпадающего меню:

<header class="navbar navbar-fixed-top">
  <div class="navbar-inner">
<div class="container">
    <nav>
            <ul class="nav pull-right">
                <li><%= link_to "Home", root_path %></li> 
            <% if signed_in? %>
                <li id="fat-menu" class="dropdown">
                    <a href="#" class="dropdown-toggle" data toggle="dropdown">
                        Account <b class="caret"></b>
                    </a>
                <ul class="dropdown-menu">
                        <li><%= link_to "Settings", edit_user_path(current_user) %></li>
                        <li class="divider"></li>
                        <li>
                            <%= link_to "Sign out", signout_path, method: "delete" %>
                        </li>
                    </ul>
                </li>
            <% else %>
                <li><%= link_to "Sign in", signin_path %>
            <% end %>
            </ul>
        </nav>
  </div>
</div>
</header>

В моем файле application.js у меня есть следующий код:

    //= require bootstrap

Я понятия не имею, почему выпадающее меню не работает, и я понятия не имею, как это исправить. Несколько дней назад он работал нормально, и теперь он больше не функционирует должным образом. Спасибо за любую помощь!

Ответы

Ответ 1

Я понял ответ из предыдущего вопроса StackOverflow:

Твиттер bootstrap неожиданно не работает

Мне пришлось поставить // = require jquery под моей строкой кода, которая требовала перезагрузки, а затем это сработало!

Ответ 2

Я тестировал ваш код HTML, и он работал нормально.

Прежде всего, убедитесь, что вы сначала загружаете jQuery:

//= require jquery
//= require bootstrap

Кроме того, вы должны вызвать выпадающее меню через javascript:

$('.dropdown-toggle').dropdown()

Ответ 3

У меня проблема с установкой по умолчанию Rails и twitter-bootstrap-rails gem.

Прямой вызов выпадающей инициализации действительно работает, но это выглядит как обходной путь для меня. Итак, я продолжил поиск ответов и смог найти тот, который выглядит более уместным:

Я решил эту проблему. Я добавляю следующий код в users.js.coffee:

jQuery ->
  $('.dropdown-toggle').dropdown()

Решение найдено здесь. Таким образом, я добавил этот код в app/assets/javascripts/bootstrap.js.coffee, поэтому последний код в нем выглядит следующим образом:

jQuery ->
  $("a[rel~=popover], .has-popover").popover()
  $("a[rel~=tooltip], .has-tooltip").tooltip()
  $('.dropdown-toggle').dropdown()

И сразу после этого раскрывающийся список в navbar начал работать точно так, как ожидалось.

Ответ 4

Решение лежит в том порядке, в котором вы импортируете зависимости javascript.

Это то, что я изначально в своем application.js

//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require bootstrap-sprockets
//= require turbolinks
//= require_tree

Когда я удалил bootstrap-sprockets i, я сработал. Однако я не хотел удалять bootstrap-sprockets. Итак, мой новый порядок выглядел так:

//= require bootstrap-sprockets
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require turbolinks
//= require_tree .

Затем, чтобы быть в безопасности, мне пришлось очистить и предварительно скомпилировать активы, запустив следующее:

rake assets:clean
bundle exec rake assets:precompile

Это сработало для меня.

Ответ 5

У меня была эта проблема на весь день, но, наконец, удалось ее исправить. Я применил решение выше (изменение порядка), и выпадающее меню сработало. Тем не менее, я заметил, что в консоли были ошибки (Uncaught ReferenceError: jQuery не определен) из-за того, что bootstrap-sprockets вызывается перед jQuery. Я нашел решение, которое сработало для меня здесь

В принципе, я включил следующий код ниже необходимых элементов в application.js как:

   //= require jquery
   //= require tether
   //= require jquery_ujs
   //= require bootstrap
   //= require bootstrap-sprockets
   //= require turbolinks
   //= require_tree .


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

Для меня это работало как шарм. Надеюсь, что кто-то поможет!

Ответ 6

Я столкнулся с той же проблемой и удалил //= require bootstrap из моего application.js для меня. Надеюсь, это тоже поможет кому-то!