ドロップダウンリストの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を開きます。

推薦する

layui をベースにしたログインページの実装

この記事の例では、ログインページを実装するためのlayuiの具体的なコードを参考までに共有しています...

JavaScript を使って簡単な計算機を書く

効果は以下のとおりです。参考プログラム: <!DOCTYPE html> <htm...

React Fiberの仕組みの詳細な説明

目次React Fiberとは何ですか?なぜReact Fiberなのか? React Fiberは...

CSS変数がJSインタラクティブコンポーネント開発にもたらす改善と変更のサンプルコードの詳細な説明

1. CSS変数がもたらす質的変化CSS 変数によってもたらされる改善は、CSS コードの節約や C...

CentOS8 Linux 8.0.1905 のインストール手順(図解)

現在、CentOS の最新バージョンは CentOS 8 です。次に、CentOS Linux 8....

HTMLページでよく使われるいくつかの小さなメソッド

<Head>タグに追加する<meta http-equiv="pragm...

HTML埋め込みタグの使用方法と属性の詳細な説明

1. 基本的な文法コードをコピーコードは次のとおりです。埋め込み src=url注: 埋め込みはさま...

HTML 代替カラーコードを実現する n 通りの方法 サンプルコード

この記事では、主に HTML のサンプル コードを紹介し、次のように交互に色を変更する方法を共有しま...

Mac MySQL のルートパスワードをリセットするチュートリアル

免責事項:このパスワード リセット方法は、Homebrew によってインストールされた MySQL ...

Vue3 手動カプセル化ポップアップ ボックス コンポーネント メッセージ メソッド

この記事では、ポップアップボックスコンポーネントメッセージのVue3手動カプセル化の具体的なコードを...

Ubuntu 12.04 でカーネルツリーを構築する実装プロセスの詳細な説明

まず使用しているカーネルのバージョンを確認してくださいlin@lin-仮想マシン:~$ uname ...

JavaScript ESの新機能letとconstキーワードに基づく

目次1. letキーワード1.1 基本的な使い方1.2 変動昇進はない1.3 一時的なデッドゾーン1...

JavaScript スタイル オブジェクトと CurrentStyle オブジェクトのケース スタディ

1. スタイルオブジェクトスタイル オブジェクトは単一のスタイル宣言を表し、スタイルが適用されている...

Nginx の起動に失敗した場合のいくつかのエラー処理の詳細な説明

Nginx を Web サーバーとして使用する際に、次の問題が発生しました。 1. nginxの起動...

jsの継承の6つの方法を詳しく解説

プロトタイプチェーン継承プロトタイプ継承は、ECMAScript における主な継承方法です。基本的な...