Меню сворачивания панели навигации Bootstrap не работает с Turbolinks

Меню сворачивания панели навигации Bootstrap не работает с Turbolinks.

Рабочий сценарий

  1. При загрузке страницы

    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> </button>
<div class="navbar-collapse collapse" id="menu"> </div>

  2. Нажмите меню и раскрывающийся список

    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> </button>
<div class="navbar-collapse in" id="menu" style="height: auto;"> </div>

  3. Щелкните меню еще раз и сверните

    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse"> </button>
<div class="navbar-collapse collapse" id="menu" style="height: 1px;"> </div>

Не работает (после перехода на любую страницу)

  1. При загрузке страницы

    the same html, no need to repeat

  2. Нажмите меню и раскрывающийся список

    the same html, no need to repeat

  3. Щелкните меню еще раз и сверните

    3.1. Временное изменение, наблюдаемое в отладчике

        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> </button>

    <div class="navbar-collapsing" id="menu" style="height: 96px;"> </div>

    Примечание: class="navbar-collapsing" и высота: 96 пикселей;

    3.2. А потом вернуться в то же состояние

        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> </button>
    <div class="navbar-collapse in" id="menu" style="height: auto;"> </div>

    Примечание. Тот же HTML, что и на шаге 2.

Версии библиотек:

  • Турбинки 2.1.0
  • JQuery 2.0.3
  • Начальная загрузка 3.0.3

Я надеюсь, что кто-то может придумать реальный ответ или объяснение.


twitter-bootstrap-3 turbolinks ruby-on-rails-4
person givanse    schedule 20.12.2013    source источник
comment
Та же проблема со мной, после того, как некоторое время поиграл, понял, что отключение - лучшее. Но возможность иметь Турбо-ссылки будет круто.   -  person Ziyan Junaideen    schedule 26.12.2013
comment
есть обновления по этому вопросу?   -  person a14m    schedule 29.09.2014
comment
Я вообще не использую Турбо-ссылки, я делаю одностраничные приложения.   -  person givanse    schedule 30.09.2014

Ответы (4)


arrow_upward
4
arrow_downward

Ответственным здесь является Turbolinks. И обходной путь — не загружать javascript Turbolinks.

В файле

app/assets/javascripts/application.js

Удалить эту строку

//= require turbolinks

person givanse    schedule 20.12.2013
comment
Также удалите data-turbolinks-track =› true из javascript_include_tag. - person Fernando Kosh; 06.03.2014

arrow_upward
2
arrow_downward

Грязным решением будет поместить следующее в ваш application.js

  $(document).on("page:change", function() {
     $(".navbar .dropdown").hover((function() {
         $(this).find(".dropdown-menu").first().stop(true, true).delay(150).slideDown();
    }), function() {
         $(this).find(".dropdown-menu").first().stop(true, true).delay(50).slideUp();
    });
  });

Имейте в виду, что это change, а не load

person kevincobain2000    schedule 23.02.2014

arrow_upward
1
arrow_downward

Другое решение.

Изготовление постоянного элемента. С помощью jQuery откройте или закройте раскрывающийся список.

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" id="button-dropdown" data-turbolinks-permanent> Button</button>

Документ от Turbolinks https://github.com/turbolinks/turbolinks#persisting-elements-across-page-loads

person Esteban Higuita Duarte    schedule 26.09.2016

arrow_upward
0
arrow_downward

Добавьте это в свои заголовки.

<meta name="turbolinks-visit-control" content="reload">

person glenn6452    schedule 10.01.2021