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

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

WBOY
リリース: 2016-06-24 11:56:47
オリジナル
1055 人が閲覧しました

案例

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

 

用于导航条

 

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

[javascript]  view plaincopy

  1.  
  2.    
  3.      Toggle navigation  
  4.        
  5.        
  6.        
  7.      
  8.    Brand  
  9.  
  
  •   
  •  
  •      
  •    
  •      
      
  •          
  •      
  •   
  •   
  •   
  •   
  •   
  • 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>
    ログイン後にコピー

    その後、ポイントポイントで下位ネットワークが発生する可能性があります。要素を決定し、関連する実行コードを実行します。
    関連ラベル:
    ソース:php.cn
    前の記事:純粋な css3_html/css_WEB-ITnose で実装されたアニメーション読み込みナビゲーション 次の記事:質問: フォーラムの友人の HTML レイアウトの実装_html/css_WEB-ITnose について
    このウェブサイトの声明
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    著者別の最新記事
    最新の問題
    関連トピック
    詳細>
    人気のおすすめ
    人気のチュートリアル
    詳細>
    最新のダウンロード
    詳細>
    ウェブエフェクト
    公式サイト
    サイト素材
    フロントエンドテンプレート