Как исправить выпадающее меню, которое не отображается при клике?
Я создаю статический веб-сайт с помощью HTML, но структура CSS была создана для меня с помощью бесплатного конструктора тем. Теперь пришло время успешно реализовать фреймворк. Я использую Начальный конструктор с их документацией для формирования моего CSS и оттуда добавляю дополнительный контент, который мне нужен. Я пытаюсь добавить раскрывающийся список в свою панель навигации, но по какой-то причине пример, который они мне дают, не работает, но их демо/пример работает. Я скопировал их код построчно и не смог заставить пример работать. Пример кода, которым я делюсь ниже, предназначен для раскрывающегося списка кнопок, единственная разница заключается в использовании класса btn, но в остальном код точно такой же для раскрывающегося списка Navbar.
<div class = "dropdown">
<a class = "btn btn-secondary dropdown-toggle" href = "#dropdownMenuLink" role = "button" id = "dropdownMenuLink" data-toggle = "dropdown" aria-haspopup = "true" aria-expanded = "false">Dropdown link</a>
<div class = "dropdown-menu" aria-labelledby = "dropdownMenuLink">
<a class = "dropdown-item" href = "#">Action</a>
<a class = "dropdown-item" href = "#">Another action</a>
<a class = "dropdown-item" href = "#">Something else here</a>
</div>
</div>
Я ожидаю, что когда я нажму на раскрывающийся список, перечисленные элементы будут отображаться в... ну... раскрывающемся списке.
Ожидаемые результаты: Непереключено/не нажато и Переключено/нажато, без зеленого квадрата вокруг него, очевидно.
Я извлекаю CSS из файла, используя <link rel = "stylesheet" type = "text/css" href = "css/bootstrap.css">
Только CSS вам не поможет, дорогой. Пожалуйста, включите Jquery и Bootstrap JS, тогда этот выпадающий список будет работать.
Вы посещали Bootstrap Builder, на который я ссылался в своем вопросе? Варианты загрузки для тем включают типы файлов .css и .scss.
Ответы 2
Начальная загрузка Twitter использует JavaScript для нескольких компонентов. В случае раскрывающихся списков он использует popper.js, поэтому, если вы хотите, чтобы раскрывающийся список работал, вам нужно будет добавить скрипт popperjs. Это задокументировано здесь.
https://getbootstrap.com/docs/4.0/начало работы/введение/#js
также все компоненты, которые зависят от JS, перечислены в этой ссылке.
Сначала проверьте свой заказ CDN. Правильно ли вы добавили CDNS или нет.
<link href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel = "stylesheet"/>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div class = "dropdown">
<a class = "btn btn-secondary dropdown-toggle" href = "#" role = "button"
id = "dropdownMenuLink" data-toggle = "dropdown" aria-haspopup = "true" aria-
expanded = "false">Dropdown link</a>
<div class = "dropdown-menu" aria-labelledby = "dropdownMenuLink">
<a class = "dropdown-item" href = "#">Action</a>
<a class = "dropdown-item" href = "#">Another action</a>
<a class = "dropdown-item" href = "#">Something else here</a>
</div>
</div>Если все в порядке, просто удалите ссылку из
<a class = "btn btn-secondary dropdown-toggle" href = "#" role = "button"
id = "dropdownMenuLink" data-toggle = "dropdown" aria-haspopup = "true" aria-
expanded = "false">Dropdown link</a>
Это будет работать нормально. Надеюсь, это поможет вам
Обратите внимание, как и выше, мой CSS берется из таблицы стилей, а не из CDN. Во-вторых, что вы подразумеваете под «удалить ссылку на ссылку»? Должно ли это читаться как html <a class = "btn btn-secondary dropdown-toggle" role = "button" id = "dropdownMenuLink" data-toggle = "dropdown" aria-haspopup = "true" aria- expanded = "false">Dropdown link</a> без href = "#"?
да попробуйте не добавлять href
Правильным путем было получить PopperJS и jQuery, а также BootstrapJS. Не уверен, почему мой Bootstrap Builder не упомянул об этом.
Добро пожаловать в SO. Не могли бы вы опубликовать код, чтобы мы могли видеть, что вы делаете. Всего один раз предложение, прочитав ваш вопрос: Пожалуйста, проверьте, использовали ли вы Jquery и Bootstrap js CDN или файлы или нет?