ドロップダウンメニュー効果を実現するJavaScript

参考までに、JavaScriptを使用してドロップダウンメニューを実装します。具体的な内容は次のとおりです。

まだフロントエンドの勉強中です。コードに不備や間違った考えがあったらご容赦ください。アドバイスをよろしくお願いします。

ドロップダウンメニューやサイドメニューは実際の開発では非常に実用的です

コード：

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
 <メタ文字セット="UTF-8">
 <title>タイトル</title>
 <スタイル>
 *{
 パディング: 0;
 マージン: 0;
 境界線: 0;
 }
 。メニュー{
 幅: 100%;
 高さ: 50px;
 境界線: 1px 実線の明るい黄色;
 ボックスの影: 0 2px 5px 黒;
 }
 .メニューdiv{
 /*上マージン: 10px;*/
 フロート: 左;
 幅: 19.82%;
 高さ: 50px;
 /* 境界線: 1px 実線赤;*/
 テキスト配置: 中央;
 }
 ボタン{
 上マージン: 15px;
 カーソル: ポインタ;
 幅: 25px;
 高さ: 15px;
 背景色: ピンク;
 }
 .show1{
 表示: なし;
 幅: 19.82%;
 高さ: 250px;
 /*境界線: 1px 黒一色;*/

 }
 .show1 div{
 境界線: 1px ピンク
 幅: 247ピクセル;
 高さ: 48px;
 テキスト配置: 中央;
 }
 {
 テキスト装飾: なし;
 表示: ブロック;
 上マージン: 10px;
 }
 ホバー{
 色: #ff242d;
 フォントサイズ: 25px;
 }
 </スタイル>
</head>
<本文>
 <div class="メニュー">
 <div> ドロップダウン 1
 <ボタン>^</ボタン>
 </div>
 <div> ドロップダウン 2
 <ボタン>^</ボタン>
 </div>
 <div> ドロップダウン 3
 <ボタン>^</ボタン>
 </div>
 <div> ドロップダウン 4
 <ボタン>^</ボタン>
 </div>
 <div> ドロップダウン 5
 <ボタン>^</ボタン>
 </div>
 </div>

 <div class="show1">
 <div><a href="#" >4654tyyut</a></div>
 <div><a href="#" >4654</a></div>
 <div><a href="#" >sdf</a></div>
 <div><a href="#" >sdf</a></div>
 <div><a href="#" >次</a></div>
 </div>
 <スクリプト>
 var btn = document.querySelector('ボタン')
 var show1 = document.querySelector('.show1')
 varフラグ=0
 btn.onclick = 関数（）{
 フラグが0の場合
 show1.style.display = 'ブロック'
 フラグ=1
 }それ以外 {
 show1.style.display='なし'
 フラグ=0
 }
 }
 </スクリプト>
</本文>
</html>

コードの説明

ここでは主にスクリプトの onclick を使用して実装します。ここで使用するボタンは他のものに置き換えることもでき、方法も同様です。

onclick の対応するものをクリックすると、イベントがトリガーされ、関数が呼び出され、フラグの値が判断されて対応する操作が実行され、div が非表示/表示されます。

ここでのフラグが鍵となります。この変数はクリックイベントが発生すると0.1の間で変化し続けます。クリックが発生したときに関数が1回実行され、つまりループが1回実行され、つまりフラグの値が判断され、表示/非表示の効果が得られます。

デモンストレーション効果

引き下げられていないとき