English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Bootstrap基本教程

Bootstrapプラグイン

Bootstrapドロップダウンメニュー（Dropdown）プラグイン

Bootstrap ドロップダウンメニュー この章では、ドロップダウンメニューについて説明しましたが、インタラクション部分には触れませんでした。本章では、ドロップダウンメニューのインタラクションについて具体的に説明します。ドロップダウンメニュー（Dropdown）プラグインを使用すると、ナビゲーションバー、タブ、ボタンなど、どんなコンポーネントにもドロップダウンメニューを追加できます。

プラグインの機能を単独で参照したい場合は、以下を参照してください dropdown.jsまたは、 Bootstrapプラグイン概要 一章に記載されているように、参照できます bootstrap.js または圧縮版の bootstrap.min.js。

使い方

ドロップダウンメニュー(Dropdown)プラグインの隠されたコンテンツを切り替えることができます：

  • data属性を通じて：リンクやボタンに 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">-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">-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">-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>
				<ul　class="dropdown-menu">
					<li><a　id="action-1"　href="#">meter</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 モーダルプラグイン