Основной учебник Bootstrap

Плагины Bootstrap

Плагин отслеживания скроллинга Bootstrap Плагин модального окна Bootstrap

Плагин спускающегося меню (Dropdown) Bootstrap

Выпадающие меню Bootstrap Эта глава объясняет спускающееся меню, но не затрагивает часть взаимодействия. В этой главе мы конкретно рассмотрим взаимодействие спускающегося меню. Используя плагин спускающегося меню (Dropdown), вы можете добавить спускающееся меню к любому компоненту (например, навигационной панели, вкладкам, капсульному меню навигации, кнопкам и т.д.).

Если вы хотите ссылаться на функции этого плагина в отдельности, вам нужно ссылаться на dropdown.js或者, как Обзор плагинов Bootstrap Как упоминалось в главе bootstrap.js или сжатую версию bootstrap.min.js。

Метод использования

Вы можете переключать скрытое содержимое плагина спускающегося меню (Dropdown):

через данные атрибуты：Добавление к ссылке или кнопке data-toggle="dropdown" для переключения спускающегося меню, как показано ниже:
```
<div>
　　<a data-toggle="dropdown" href="#">Триггер спускающегося меню (Dropdown)</a>
　　<ul role="menu" aria-labelledby="dLabel">
　　　　...
　　</ul>
</div>
```
Если вам нужно сохранить ссылку в целостности (полезно, если JavaScript в браузере отключен), пожалуйста, используйте data-target 属性代替 href="#"：
```
<div>
　　<a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
　　　　Выпадающий список (Dropdown) <span></span>
　　</a>
　　<ul role="menu" aria-labelledby="dLabel">
　　　　...
　　</ul>
</div>
```
Через JavaScriptЧтобы переключить выпадающий список с помощью JavaScript, используйте следующий метод:
```
$('.dropdown-toggle').dropdown()
```

Онлайн пример

Внутри навигационной панели

Ниже приведен пример использования выпадающего списка в навигационной панели:

Онлайн пример

Пример

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Пример Bootstrap - Стандартная навигационная панель</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
	<div class="container-fluid">　
	<div class="navbar-header">
		<a class="navbar-brand" href="#">Сайт основного руководства</a>
	</div>
	<div>
		<ul class="nav navbar-nav">
			<li class="active"><a href="#">iOS</a></li>
			<li><a href="#">SVN</a></li>
			<li class="dropdown">
				<a href="#" class="dropdown-toggle" data-toggle="dropdown">
					Java　
					<b class="caret"></b>
				</a>
				<ul class="dropdown-menu">
					<li><a href="#">jmeter</a></li>
					<li><a href="#">EJB</a></li>
					<li><a href="#">Jasper Report</a></li>
					<li class="divider"></li>
					<li><a href="#">Разделенный链接</a></li>
					<li class="divider"></li>
					<li><a href="#">Другой разделенный链接</a></li>
				</ul>
			</li>
		</ul>
	</div>
	</div>
</nav>
</body>
</html>

Проверьте, посмотрите ‹/›

Результаты показаны ниже:

Внутри вкладки

Ниже приведен пример использования выпадающего списка в вкладках:

Онлайн пример

Пример

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Пример Bootstrap - Вкладки с выпадающими списками</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<p>Вкладки с выпадающими списками</p>
<ul class="nav nav-tabs">
	<li class="active"><a href="#">Home</a></li>
	<li><a href="#">SVN</a></li>
	<li><a href="#">iOS</a></li>
	<li><a href="#">VB.Net</a></li>
	<li class="dropdown">
		<a class="dropdown-toggle" data-toggle="dropdown" href="#">
			Java <span class="caret"></span>
		</a>
		<ul class="dropdown-menu">
			<li><a href="#">Swing</a></li>
			<li><a href="#">jMeter</a></li>
			<li><a href="#">EJB</a></li>
			<li class="divider"></li>
			<li><a href="#">Разделенный链接</a></li>
		</ul>
	</li>
	<li><a href="#">PHP</a></li>
</ul>
</body>
</html>

Проверьте, посмотрите ‹/›

Результаты показаны ниже:

Варианты

Нет вариантов.

Метод

Для переключения выпадающего списка существует простая методика для отображения или скрытия выпадающего списка.

$().dropdown('toggle')

Онлайн пример

Ниже приведен пример использования метода плагина выпадающего списка (Dropdown):

Онлайн пример

Пример

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Пример Bootstrap - Модуль выпадающего меню (Dropdown) методы</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
	<div class="container-fluid">　
	<div class="navbar-header">
		<a class="navbar-brand" href="#">Сайт основного руководства</a>
	</div>
	<div id="myexample">
		<ul class="nav navbar-nav">
			<li class="active"><a href="#">iOS</a></li>
			<li><a href="#">SVN</a></li>
			<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Java <b class="caret"></b></a></li>
				<ul class="dropdown-menu">
					<li><a id="action-1" href="#">计量器</a></li>
					<li><a href="#">EJB</a></li>
					<li><a href="#">Jasper Report</a></li>
					<li class="divider"></li>
					<li><a href="#">Разделенный链接</a></li>
					<li class="divider"></li>
					<li><a href="#">Другой разделенный链接</a></li>
				</ul>
			</li>
		</ul>
	</div>
	</div>	
</nav>
<script>
$(function(){
	//　По умолчанию отображается
	$(".dropdown-toggle").dropdown('toggle');
});　
</script>
</body>
</html>

Проверьте, посмотрите ‹/›

Результаты показаны ниже:

Плагин отслеживания скроллинга Bootstrap Плагин модального окна Bootstrap