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

BootStrapでマウスオーバーでドロップダウンリストを表示する機能を実現する

BootStrapを使用してマウスオーバーでドロップダウンリスト機能を実現します。詳細な内容は以下の通りです:

 //最も簡単なマウスオーバーで、ドロップダウン機能を実現し、Bootstrapフレームワークの知識を応用。Bootstrap自体を知らない場合は、百度で使い方を検索してください

 <html><head>
    <meta charset="UTF-8">
      <!-- Bootstrapを導入 -->
   <link href="../css/"bootstrap.min.css" rel="external nofollow" rel="stylesheet">
     <!-- jQueryファイル。bootstrap.min.jsの前に読み込む必要があります -->
    <script src="../libs/jquery-1.11.1.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <title></title>
  </head>
  <body>
<div class="dropdown" >
      <span class="dropdown-toggle" data-toggle="dropdown" data-target="#" >トリガー</span>
       <ul class="dropdown-menu" >
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
      </ul>
    </div>
    <script>
      $(document).ready(function(){
        $("span").hover(function(){//マウスオーバートリガーイベント
        $(".dropdown-toggle").dropdown('toggle');
        });
      });
    </script>
  </body>
</html>

以上は編集者が皆さんに紹介したBootStrapでマウスオーバー時のドロップダウンリストの機能です。皆さんの助けになりますように。何か疑問があれば、コメントを残してください。編集者はすぐに回答します。また、皆さんの呐喊チュートリアルサイトへのサポートに感謝します。

声明:この記事の内容はインターネットから収集され、著作権者に帰属します。インターネットユーザーによって自発的に提供され、アップロードされました。当サイトは所有権を持ちません。また、人間による編集は行われていません。著作権に関する問題があれば、メールを送信してください:notice#oldtoolbag.com(メールの際は、#を@に変更してください)で通報し、関連する証拠を提供してください。一旦確認が取れましたら、当サイトは即座に侵害する可能性のあるコンテンツを削除します。

基礎教程
おすすめ