Выпадающее окно Bootstrap не работает
Я не могу заставить выпадающее меню bootstrap работать.
Вот мой html для nav:
<ul class='nav'>
<li class='active'>Home</li>
<li class='dropdown'>
<a class="dropdown-toggle" data-toggle="dropdown" href='#'>Personal asset loans</a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">asds</a></li>
<li class="divider"></li>
</ul>
</li>
<li>Payday loans</li>
<li>About</li>
<li>Contact</li>
</ul>
И вот сценарии:
<script type="text/javascript" src="js/bootstrap/bootstrap-dropdown.js"></script>
<script>
$(document).ready(function(){
$('.dropdown-toggle').dropdown()
});
</script>
Что я делаю неправильно? Спасибо за ваши ответы!
Ответы
Ответ 1
Рабочая демонстрация: http://codebins.com/bin/4ldqp73
попробуйте это
<ul class='nav'>
<li class='active'>Home</li>
<li>
<div class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Personal asset loans</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li><a href="#">asds</a></li>
<li class="divider"></li>
</ul>
</div>
</li>
<li>Payday loans</li>
<li>About</li>
<li>Contact</li>
</ul>
Ответ 2
У меня была та же проблема. Через пару часов после стрельбы обнаружили, что
У меня был
<script type="text/javascript" src="Scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="Scripts/jquery-2.1.1.min.js"></script>
вместо <
<script type="text/javascript" src="Scripts/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="Scripts/bootstrap.min.js"></script>
Надеюсь, это поможет кому-то
Ответ 3
У меня была такая же проблема, когда я дважды включил bootstrap.min.js. Удалил один из них, и он начал работать.
Ответ 4
FYI: Если у вас есть bootstrap.js, вы не должны добавлять bootstrap-dropdown.js.
Я не уверен в результате с bootstrap.min.js.
Ответ 5
Для вашего стиля вам нужно включить файлы css bootstrap, как правило, перед элементом </head>
<link href="css/bootstrap.css" rel="stylesheet">
Далее вам нужно будет включить файлы js, рекомендуется включить их в конец документа, обычно перед </body>, чтобы страницы загружались быстрее.
<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script>
Ответ 6
Добавьте следующие теги в теги тела.
<!-- jQuery (necessary for Bootstrap JavaScript plugins) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files
as needed -->
<script src="js/bootstrap.min.js"></script>
Ответ 7
вам нужно импортировать эти файлы в <head></head> вашего html.
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
Ответ 8
Включили ли вы jquery.js?
Также сравните эту строку кода с вашим:
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Personal asset loans<b class="caret"></b></a>
Смотрите эту версию, которая работает нормально.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Bootstrap dropdown</title>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<a class="brand" href="#">w3resource</a>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li class="dropdown" id="accountmenu">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Tutorials<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">PHP</a></li>
<li><a href="#">MySQL</a></li>
<li class="divider"></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">HTML5</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="container-fluid">
<h1>Dropdown Example</h1>
</div>
<script type="text/javascript" src="js/jquery-latest.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.dropdown-toggle').dropdown();
});
</script>
</body>
</html>
Ответ 9
Оба бутстрапа и jquery должны быть включены:
<link type="text/css" href="/{ProjectName}/css/ui-lightness/jquery-ui-1.8.18.custom.css" rel="stylesheet" />
<script type="text/javascript" src="/{ProjectName}/js/jquery-x.x.x.custom.min.js"></script>
<link type="text/css" href="/{ProjectName}/css/bootstrap.css" rel="stylesheet" />
<script type="text/javascript" src="/{ProjectName}/js/bootstrap.js"></script>
ПРИМЕЧАНИЕ. Версия jquery-x.x.x.min.js должна быть версии 2.x.x!!!
Ответ 10
Я понял это, и самый простой способ сделать это ist просто скопировать и пропустить CDN ссылки bootstrap, которая может быть найдена в https://www.bootstrapcdn.com/ и Jquery CDN Scripts, которые можно найти здесь https://code.jquery.com/, и после того, как вы скопируете ссылки, патч загрузочных ссылок на голову HTML и JQuery Script вставляются в тело HTML, как показано ниже:
<!DOCTYPE html>
<html>
<head>
<title>Purrfect Match Landing Page</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!--<link rel="stylesheet" href="griddemo.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<!-- Latest compiled and minified JavaScript -->
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script>
</body>
</html>
Для меня работает прекрасная надежда, что он работает и для вас:)
Ответ 11
Попробуйте это в разделе главы
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
Ответ 12
Вот что я сделал...
Просто удалил bootstrap.min.js из моего проекта и добавил bootstrap.js к нему, и он начал работать........
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap.js"
//"~/Scripts/bootstrap.min.js"));
Ответ 13
Вам нужно будет проверить конфликтующие файлы/свойства css, например, вы могли бы иметь ".nav" содержимое пользовательского стиля в другом месте, чтобы отключить ваши собственные файлы css и проверить, работает ли это, затем проверяет, какой файл или пользовательский стиль создает конфликты
также убедитесь, что вы включили bootstrap.min.js в свой код
Ответ 14
У меня была похожая проблема, но я заметил, что я добавил сценарий начальной загрузки дважды, а второй сценарий начальной загрузки был после выше сценария jquery.
Решение:
- Убедитесь, что bootstrap.min.js и jquery.min.js включены в ваш файл только один раз.
- Сценарий bootstrap.min.js должен быть включен после jquery.min.js
Ответ 15
Попробуйте этот код:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Bootstrap Tutorial</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<h1>Welcome to Bootstrap</h1>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<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>
<script src="https://code.jquery.com/jquery.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>
Ответ 16
У меня была такая же проблема, которая привела меня сюда.
Моя проблема: я использовал рекомендованную версию jquery 1.12.0 в качестве файла jquery script.
Решение: заменил jquery script на версию jQuery 2.2.0.
Это решило это для меня.
Ответ 17
Для меня это была проблема с CORS. Я удалил crossorigin="anonymous" из скрипта, импортирующего теги, и он снова начал работать.
Кстати, последние теги скриптов, в правильном порядке, всегда можно найти здесь: https://getbootstrap.com/
Изменение: Очевидно, добавление defer в тег script также нарушит все вкусности Bootstrap.
Ответ 18
Скопируйте/вставьте ссылку CSS, за которой следует ссылка JS с сайта начальной загрузки здесь. Тогда выпадающий должен работать.
Моя страница выглядит так:
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<title>Website Title</title>
</head>
<body>
<div id="content" />
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</body>
</html>
(Навбар отсюда)
Ответ 19
У меня были настройки с Angular 7, jQuery 3.4.1, Popper 1.12.9 и Bootstrap 4.3.1, у меня ничего не получалось, пока я не сделал этот небольшой хак в стилях:
.dropdown.show .dropdown-menu {
opacity: 1 !important;
}
HTML выглядит так:
<nav class="navbar navbar-expand-lg navbar-dark fixed-top py-1">
<div class="container-fluid">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" id="dropdown-id"
aria-expanded="false">Menu</button>
<div class="dropdown-menu" aria-labelledby="dropdown-id">
<a class="dropdown-item" [routerLink]='["/"]'>Main page</a>
<a class="dropdown-item" [routerLink]='["/about"]'>About</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" [routerLink]='["/about/terms"]'>Terms</a>
<a class="dropdown-item" [routerLink]='["/about/privacy"]'>Privacy</a>
</div>
</li>
</ul>
</div>
</nav>
