この記事の例では、ドロップダウンリストを実装するための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を開きます。
JavaScript でポインターの位置を取得する方法は、イベント オブジェクトの pageX と ...
前の章では、1 つのテーブルからデータを読み取る方法を学習しました。これは比較的簡単ですが、実際のア...
Nginxはバージョン情報を隠すだけでなく、カスタムWebサーバー情報もサポートします。まずは最終的...
目次導入説明書実際の経験長所と短所総括する導入mysqlpump は mysqldump の派生です...
開発中に、非常に単純なテキストバブル効果に遭遇しました。これは、おおよそ次のようになります。 うーん...
element-uiを使用する場合、el-popoverというよく使われるコンポーネントがありますが...
6つの効果実装コードhtml <h1>CSS 境界遷移</h1> <セ...
目次1. 共同インデックスの説明2. ac はインデックスを使用できますか? 3. 考える4. 最左...
目次仮想DOMとは何ですか?なぜ仮想DOMが必要なのでしょうか?仮想 DOM はどのようにして実際の...
読み取り専用入力を実現するには、無効と読み取り専用の 2 つの方法があります。当然、どちらの結果も読...
目次1. 例: これはデータとメソッドを直接取得できます2. 環境を準備し、ソースコードをデバッグし...
この例では、デバッグ用の MySQL データベースをダウンロードしてインストールする必要があります。...
この記事では、適応解像度を実現するためのVue2.0の具体的なコードを参考までに紹介します。具体的な...
MySQL エスケープエスケープとは、エスケープ文字の本来の意味を意味します。エスケープ文字の目的は...
1. 準備例: 2 台のマシン: 192.168.219.146 (マスター)、192.168.21...