検索

ホームページ >ウェブフロントエンド >htmlチュートリアル >ブートストラップ学習 JS プラグイン記事のドロップダウン menu_html/css_WEB-ITnose

ブートストラップ学習 JS プラグイン記事のドロップダウン menu_html/css_WEB-ITnose

WBOY
WBOYオリジナル
2016-06-24 11:56:471077ブラウズ

案例

通过此插件可以为几乎所有东西添加下拉菜单，包括导航条、标签页、胶囊式按钮。

 

用于导航条

 

导航条分为四个部分。第一部分导航头，第二部分导航列，第三部分form查询表单，第四部分导航列。

[javascript]  view plaincopy

  1. d4a98362ec34c1c395e50c8cea5ddbab  
  2.  d9bf25ad056131a8f4943d012f115164  
  3.    072ba619f3ac5b5d74a4acdb120bd111  
  4.      64952123ee1a1d9b385bc3bca58612f0Toggle navigation54bdf357c58b8a65c66d7c19c8e4d114  
  5.      31672ff60d0b0a2998efee148654e4e954bdf357c58b8a65c66d7c19c8e4d114  
  6.      31672ff60d0b0a2998efee148654e4e954bdf357c58b8a65c66d7c19c8e4d114  
  7.      31672ff60d0b0a2998efee148654e4e954bdf357c58b8a65c66d7c19c8e4d114  
  8.    65281c5ac262bf6d81768915a4a77ac0  
  9.    47f9151e46f5066f9c26649088245d48Brand5db79b134e9f6b82c0b36e0489ee08ed  
  10.  16b28748ea4df4d9c2150843fecfba68  
  11.   
  12.  e5d97e6e59289c298917804ad91b5a4b  
  13.    bfa11fb4b31287f535cfbc7f7ef3c56c  
  14.      6072cf9f6bd7b20ca2e4e430b3e487adf1b3ba8846c179e65eb68da95b01a812Link5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb  
  15.      25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812Link5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb  
  16.      669703836e8c1866c76e0de8a4340b23  
  17.        4f1fc7dbd68787cd6b18e127e4b25844Dropdown 12bdbd0acb84b74bc4f78c0ea70b0e740d36329ec37a2cc24d42c7229b69747a5db79b134e9f6b82c0b36e0489ee08ed  
  18.        854df089c6ee54d934e694c7fb3c0b75  
  19.          25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812Action5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb  
  20.          25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812Another action5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb  
  21.          25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812Something else here5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb  
  22.          1ba080d535072e9eeeb0bd2074d14f99bed06894275b65c1ab86501b08a632eb  
  23.          25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812Separated link5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb  
  24.          1ba080d535072e9eeeb0bd2074d14f99bed06894275b65c1ab86501b08a632eb  
  25.          25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812One more separated link5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb  
  26.        929d1f5ca49e04fdcb27f9465b944689  
  27.      bed06894275b65c1ab86501b08a632eb  
  28.    929d1f5ca49e04fdcb27f9465b944689  
  29.    23d5d2cbb589284daedf3afcae790a2b  
  30.      1d62a832781cd1c2cbae5beb67379498  
  31.        28ac4e85b089efdf0ba6d9a3eba7f5ab  
  32.      16b28748ea4df4d9c2150843fecfba68  
  33. 751182ca7d8d34c0344838109cf16631送信65281c5ac262bf6d81768915a4a77ac0  
  34. f5a47148e367a6035fd7a2faa965022e  
  35. 4b37473fb215882fb5b7ef824ac2bbfd  
  36. 25edfb22a4f469ecb59f1190150159c6ee7959cc8dd4be16ef633321c03dac32リンク5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb  
  37. c0681fc17243770ad36d44adcd4d376c  
  38. d3da9fce9e1f71951afd6b81e770efbcドロップダウン 198b0b30fcc77dc019a894563164d6a10d36329ec37a2cc24d42c7229b69747a5db79b134e9f6b82c0b36e0489ee08ed  
  39. a03e72f68170606d7442fa279cbc8f14  
  40. 25edfb22a4f469ecb59f1190150159c6ee7959cc8dd4be16ef633321c03dac32アクション5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb  
  41. 25edfb22a4f469ecb59f1190150159c6ee7959cc8dd4be16ef633321c03dac32別のアクション5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb  
  42. 25edfb22a4f469ecb59f1190150159c6ee7959cc8dd4be16ef633321c03dac32その他の内容はこちら5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb  
  43. 9d1f934341079c21cf67f67b315c4d5ebed06894275b65c1ab86501b08a632eb  
  44. 25edfb22a4f469ecb59f1190150159c6ee7959cc8dd4be16ef633321c03dac32別のリンク5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb  
  45. 929d1f5ca49e04fdcb27f9465b944689  
  46. bed06894275b65c1ab86501b08a632eb  
  47. 929d1f5ca49e04fdcb27f9465b944689  
  48. 16b28748ea4df4d9c2150843fecfba68  
  49. lt;/nav>  
効果は、

使用法 1--data プロパティ

を介して接続または追加することで、data-toggle="dropdown" を実行したり、メニューを削除したりできます。

れーれー

用法二 -- 通过JavaScript

通过JavaScript打开または关闭下拉菜单：

删除data-toggle属性，那么再次点击就不会出现下来菜单了，次来我们通给这个a标onclick イベントを追加します。 

      <li class="dropdown">        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>        <ul class="dropdown-menu">          <li><a href="#">Action</a></li>          <li><a href="#">Another action</a></li>          <li><a href="#">Something else here</a></li>          <li class="divider"></li>          <li><a href="#">Separated link</a></li>          <li class="divider"></li>          <li><a href="#">One more separated link</a></li>        </ul>      </li>

その後、ポイントポイントで下位ネットワークが発生する可能性があります。要素を決定し、関連する実行コードを実行します。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：純粋な css3_html/css_WEB-ITnose で実装されたアニメーション読み込みナビゲーション次の記事：純粋な css3_html/css_WEB-ITnose で実装されたアニメーション読み込みナビゲーション

関連記事

続きを見る