Раскрывающийся список Bootstrap4 работает только во второй клик - PullRequest
Новая
       33

Раскрывающийся список Bootstrap4 работает только во второй клик

0 голосов
/ 23 мая 2018

Эй, ребята, я работаю над проектом django, который использует bootstrap4, и у меня небольшая проблема с выпадающим переключателем ...

Переключатель только переключает выпадающее меню после второй ссылки!

Что я сделал не так?

Это мой раскрывающийся HTML-код: 

            <li class="nav-item dropdown show">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Dropdown Toggler
                </a>
                <div class="dropdown-menu" role="menu" aria-labelledby="navbarDropdown">
                 <a class="dropdown-item">Link 1</a>
                 <a class="dropdown-item">Link 2</a>
                </div>
            </li>

Ответы [ 5 ]

0 голосов
/ 04 августа 2019

Согласен с Иваном Б. В Rails в javascripts я оставил только bootstrap.bundle.js.В Gemfile добавьте gem 'popper_js', '~> 1.14.5', соответственно в application.js мы должны добавить // = require popper

0 голосов
/ 25 октября 2018

Недавно я столкнулся с той же проблемой, но решил ее, добавив $ ('. Dropdown-toggle'). Dropdown () после загрузки раскрывающегося списка.Надеюсь, что это может помочь без перехода от data-toggle = "dropdown" к data-toggle = "collapse".

0 голосов
/ 04 августа 2018

У меня была та же проблема, затем решенная.Часто я из-за двойного импорта библиотек начальной загрузки js.Надежда поможет вам.

0 голосов
/ 04 октября 2018

Попробуйте поместить файл начальной загрузки js перед загрузкой css

Пример:

  1. Сначала ссылка на файл Bootstrap.min.js. 

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
Затем ссылка на файл CSS 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

У меня возникла та же проблема, и после изменения позиций js и css выпадающий список работает хорошо.Надеюсь, это помогло вам.

0 голосов
/ 24 мая 2018

вам нужно использовать такой переключатель и назначить data-target выпадающему меню с его идентификатором

, используя

data-target = "#navbarDropdown "

 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarDropdown" aria-controls="navbarDropdown" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

и затем назначьте этот идентификатор в меню 

        <li class="nav-item dropdown show">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarDropdown" aria-controls="navbarDropdown" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
            <div id="navbarDropdown" class="dropdown-menu"  role="menu" aria-labelledby="navbarDropdown">
             <a class="dropdown-item">Link 1</a>
             <a class="dropdown-item">Link 2</a>
            </div>
        </li>
...