この記事の例では、ドロップダウンリストを実装するための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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: VMWare12 グラフィックチュートリアルで Apple Mac OS X をインストールする
>>: LinuxでMySQLのリモートアクセス権を有効にし、ファイアウォールでポート3306を開きます。
この記事の例では、ログインページを実装するためのlayuiの具体的なコードを参考までに共有しています...
効果は以下のとおりです。参考プログラム: <!DOCTYPE html> <htm...
目次React Fiberとは何ですか?なぜReact Fiberなのか? React Fiberは...
1. CSS変数がもたらす質的変化CSS 変数によってもたらされる改善は、CSS コードの節約や C...
現在、CentOS の最新バージョンは CentOS 8 です。次に、CentOS Linux 8....
<Head>タグに追加する<meta http-equiv="pragm...
1. 基本的な文法コードをコピーコードは次のとおりです。埋め込み src=url注: 埋め込みはさま...
この記事では、主に HTML のサンプル コードを紹介し、次のように交互に色を変更する方法を共有しま...
免責事項:このパスワード リセット方法は、Homebrew によってインストールされた MySQL ...
この記事では、ポップアップボックスコンポーネントメッセージのVue3手動カプセル化の具体的なコードを...
まず使用しているカーネルのバージョンを確認してくださいlin@lin-仮想マシン:~$ uname ...
目次1. letキーワード1.1 基本的な使い方1.2 変動昇進はない1.3 一時的なデッドゾーン1...
1. スタイルオブジェクトスタイル オブジェクトは単一のスタイル宣言を表し、スタイルが適用されている...
Nginx を Web サーバーとして使用する際に、次の問題が発生しました。 1. nginxの起動...
プロトタイプチェーン継承プロトタイプ継承は、ECMAScript における主な継承方法です。基本的な...