ドロップダウンリストのJavaScript実装

ドロップダウンリストのJavaScript実装

この記事の例では、ドロップダウンリストを実装するためのJavaScriptの具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。

今回は比較的シンプルなドロップダウンリストの実装を書きました。クリックするとリストの内容が表示され、もう一度クリックするとリストが消えます。長い間勉強した結果、この js の書き方の方が確かに使いやすいことがわかりました。まずは効果を見てみましょう。

早速コードを見ていきましょう。JSがメインでCSSは任意でデバッグできるのですが、この書き方だとCSSが必須になります。

1. HTMLコード

<本文>
<!--最外層-->
<div class="outer">
<!-- 内部 -->
<div class="inner">
<h2>まず</h2>
 <ul>
  <li>あ</li>
  <li>ば</li>
  <li>c</li>
 </ul>
</div>

<div class="inner">
 <h2>2番目</h2>
 <ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
 </ul>
</div>

<div class="inner">
 <h2>2番目</h2>
 <ul>
  <li>4</li>
  <li>5</li>
  <li>6</li>
 </ul>
</div>

 <div class="inner">
  <h2>2番目</h2>
  <ul>
   <li>7</li>
   <li>8</li>
   <li>9</li>
  </ul>
 </div>


<!-- 内部 -->
</div>
<!--最外層-->
</本文>

2. CSSコード

 .外側{
   マージン: 0 自動;
   幅: 500ピクセル;
   高さ: 600px;
   境界線: 1px 実線の赤;
  }
  .外側 .内側{
   幅: 500ピクセル;
   境界線: 1px 実線の赤;

  }
  .外側 .内側 ul{
   リストスタイル: なし;
   境界線: 1px 実線フクシア色;
  }
  h2{
   境界線: 1px 実線青紫;
   高さ: 30px;
   ディスプレイ: フレックス;
   コンテンツの中央揃え: 中央;
   カーソル: ポインタ;
   背景色: #74a400;
   マージン: 0;
  }
  ul{
   表示: なし;
   

  }
  
 
  ここでは、.ul は HTML に含まれていないため、js を通じて追加する必要があります。
   表示: ブロック;
   背景色: コーンフラワーブルー;
   マージン: 0;
  }
  ul li{
   境界線: 1px 実線 コーンフラワーブルー;
   背景色: ダークグレー;
   ディスプレイ: フレックス;
   コンテンツの中央揃え: 中央;
   左マージン: -42px;
   カーソル: ポインタ;

}

3. 最も重要なjsコード部分

window.onload = 関数(){
  // h2 と ul を取得
   var h2 = document.getElementsByTagName("h2");
   タグ名で要素を取得する
   //すべてのh2にクリックイベントをバインドします for (let i = 0; i <h2.length; i++) {
    h2[i].index = i;
    h2[i].onclick = 関数(){
 // バインドされたイベントは、h2 と同じレベルの ul にクラス名がない場合、そのクラス名は ul という名前になります。クラス名がある場合は、そのクラス名は空に設定されます。
 // CSS コードを見ると、js が対応する h2 クラス名をまだ変更していないため、機能しない .ul 部分があることがわかります。これは、h2 がクリックされたときにのみ変更されます。
 // この書き方は、CSS スタイルの内容を直接変更するのではなく、名前を変更することでスタイルの変更を実現します。これにより、スタイルを繰り返し記述することなく、1 つのスタイルを何度も使用することができます。
     if (ul[this.index].className == ""){
      ul[this.index].className = "ul";
     }それ以外 {
      ul[this.index].className = "";
     }
    }
 }
}

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • js はドロップダウンリストで値を選択するメソッドを実装します (3 つのメソッド)
  • jQuery が Ajax を使用してバックグラウンドから JSON データを取得した後、ドロップダウン リストにコンテンツを入力する方法
  • jquery+json ユニバーサル 3 レベル リンク ドロップダウン リスト
  • JavaScript の年ドロップダウン リスト ボックスには、現在の年とその前後 50 年が含まれます。
  • ドロップダウンリストボックスの値とテキスト値を取得する js <option> サンプルコード
  • extJs テキストボックスの後ろに説明テキストを追加し、ドロップダウンリストで値を選択した後にイベントをトリガーします
  • JavaScript カスケード ドロップダウン リストのサンプル コード (自作)
  • JavaScript を使用してドロップダウン リストに複数レベルのツリー メニューを表示する方法
  • JavaScript はドロップダウン リスト ボックスのテキスト値を取得します。サンプル コード
  • jsを使用して編集可能な選択ドロップダウンリストを実装する

<<:  VMWare12 グラフィックチュートリアルで Apple Mac OS X をインストールする

>>:  LinuxでMySQLのリモートアクセス権を有効にし、ファイアウォールでポート3306を開きます。

推薦する

JavaScriptでポインターの位置を取得する方法を教えます

JavaScript でポインターの位置を取得する方法は、イベント オブジェクトの pageX と ...

MySQL での Join の使用に関する詳細な説明

前の章では、1 つのテーブルからデータを読み取る方法を学習しました。これは比較的簡単ですが、実際のア...

nginx のバージョン番号と WEB サーバー情報を隠すための解決策

Nginxはバージョン情報を隠すだけでなく、カスタムWebサーバー情報もサポートします。まずは最終的...

MySQL公式エクスポートツールmysqlpumpの使用

目次導入説明書実際の経験長所と短所総括する導入mysqlpump は mysqldump の派生です...

border-image を使用してテキストバブルの境界線を実装する方法のサンプルコード

開発中に、非常に単純なテキストバブル効果に遭遇しました。これは、おおよそ次のようになります。 うーん...

elementui の el-popover スタイルの変更が有効にならない問題の解決策

element-uiを使用する場合、el-popoverというよく使われるコンポーネントがありますが...

CSS3で実装された6つの境界遷移効果

6つの効果実装コードhtml <h1>CSS 境界遷移</h1> <セ...

MySQLデータベースインデックスの左端一致原則

目次1. 共同インデックスの説明2. ac はインデックスを使用できますか? 3. 考える4. 最左...

Javascript 仮想 DOM の詳細な説明

目次仮想DOMとは何ですか?なぜ仮想DOMが必要なのでしょうか?仮想 DOM はどのようにして実際の...

無効と読み取り専用で入力を読み取り専用に設定する

読み取り専用入力を実現するには、無効と読み取り専用の 2 つの方法があります。当然、どちらの結果も読...

ソースコードから、Vue2がデータとメソッドを直接取得できる理由がわかる

目次1. 例: これはデータとメソッドを直接取得できます2. 環境を準備し、ソースコードをデバッグし...

CentOS7 に MySQL データベースをインストールしてデバッグする詳細な手順 [例]

この例では、デバッグ用の MySQL データベースをダウンロードしてインストールする必要があります。...

Vue2.0は適応解像度を実装する

この記事では、適応解像度を実現するためのVue2.0の具体的なコードを参考までに紹介します。具体的な...

MySQL における ESCAPE キーワードの使用法の詳細な説明

MySQL エスケープエスケープとは、エスケープ文字の本来の意味を意味します。エスケープ文字の目的は...

CentOS 7.x のマスターおよびスレーブ DNS サーバーの展開

1. 準備例: 2 台のマシン: 192.168.219.146 (マスター)、192.168.21...