ブートストラップ ドロップダウン メニュー


ブートストラップ ドロップダウン プラグイン

ブートストラップ ドロップダウン メニュー この章ではドロップダウン メニューについて説明しますが、対話部分は含まれません。この章では、ドロップダウン メニューの対話について詳しく説明します。 Dropdown プラグインを使用すると、任意のコンポーネント (ナビゲーション バー、タブ ページ、カプセル ナビゲーション メニュー、ボタンなど) にドロップダウン メニューを追加できます。

このプラグインの機能を個別に参照したい場合は、dropdown.jsを参照する必要があります。あるいは、ブートストラップ プラグインの概要の章で説明したように、bootstrap.js または bootstrap.min.js の縮小バージョンを参照することもできます。

使用法

ドロップダウン メニュー (ドロップダウン) プラグインの非表示コンテンツを切り替えることができます:

  • data 属性を使用して: ドロップダウンを切り替えるリンクまたはボタンに data-toggle="dropdown" を追加します。以下に示すメニュー:

<div class="dropdown">
<a data-toggle="dropdown" href="#">ドロップダウン メニュー (ドロップダウン) トリガー</a>
<ul class="dropdown-menu" role="menu" aria-labeledby="dLabel">
...
</ul>
</div>

  • 保存する必要がある場合リンクはそのままです (ブラウザで JavaScript が有効になっていない場合に便利です)。 href="#" の代わりに data-target 属性を使用してください:

<div class="dropdown">
<a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
ドロップダウン メニュー (ドロップダウン) <span class="caret "></span>
</a>


<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
...
</ul> ;
</div>

  • via JavaScript: JavaScript 経由でドロップダウン メニューの切り替えを呼び出すには、次のメソッドを使用してください:

$('.dropdown-toggle').dropdown ()

インスタンス

ナビゲーション バー内

次の例は、ナビゲーション バーのドロップダウン メニューの使用方法を示しています。

インスタンス

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 默认的导航栏</title>
   <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">  
     <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
     <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<nav class="navbar navbar-default" role="navigation">
   <div class="navbar-header">
      <a class="navbar-brand" href="#">W3Cschool</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>
</nav>

</body>
</html>

インスタンスの実行»

「実行」をクリックします「インスタンス」ボタンをクリックしてオンライン例を表示します

タブ内

次の例は、タブ内でのドロップダウン メニューの使用方法を示しています:

インスタンス

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 带有下拉菜单的标签页</title>
   <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">  
     <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
     <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/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) プラグイン メソッドの使用を示しています:

Example

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 下拉菜单（Dropdown）插件方法</title>
   <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">  
     <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
     <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<nav class="navbar navbar-default" role="navigation">
   <div class="navbar-header">
      <a class="navbar-brand" href="#">W3Cschool</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="#">
                     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>
   </nav>
</div>
<script>
   $(function(){
      $(".dropdown-toggle").dropdown('toggle');
      }); 
</script>

</body>
</html>

例の実行 »

「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します