jqueryでドロップダウンメニューを実装する方法

方法: 1. 2 つの div 要素を使用して第 1 レベルの要素と第 2 レベルの要素を設定します; 2. 第 1 レベルの要素にクリック イベントを追加し、slideToggle を使用してイベント処理関数を設定します。構文は「第 1 レベル要素オブジェクト.click(function(){第 2 要素オブジェクト.slideToggle();})」です。

このチュートリアルの動作環境: Windows10 システム、jquery3.2.1 バージョン、Dell G3 コンピューター。

jquery を使用してドロップダウン メニューを実装する方法

1. まず、hbuilder で 2 つの div タグを記述し、それらに ID 名を付けます。ここでは、それらの ID 名を 1 つに設定し、ワンメニュー。

次に、ID が 1 の CSS スタイルを設定します。ここでは空色に設定します。

その後、onemenuのCSSスタイルを設定しますが、区別するために赤色に設定しました。

その後、効果をプレビューしてみましょう。空色と赤の 2 つの部分があることがわかります。あとは、青色の部分をクリックするだけです。の部分と赤い部分が上に折りたたまれ、もう一度青い部分をクリックすると赤い部分が下に移動します。

#2. 次に、jQuery メソッドを使用して、クリック イベントを、クリック イベントが配置されている div にバインドします。次に、クリックする匿名関数をバインドします。

次に、匿名関数 jQuery にメソッドを記述します。このステートメントについて説明します。jQuery は、onemenu の ID を持つ div 要素を取得することを意味します。イベントがトリガーされると、要素は slideToggle を呼び出します方法。 slideToggleでは時間を設定できるのですが、ここでは3秒に相当する3000ミリ秒に設定しました。

<script>
$(document).ready(function(){
$("#one").click(function(){
$("#onemenu").slideToggle(3000);
});
});
</script>

このように、青い部分をクリックすると赤い部分がゆっくり上にスライドして非表示になり、もう一度クリックするとゆっくりと下にスライドして表示されます。静止画なのでスライドの効果は見えませんが、練習して効果を確認してください。

推奨される関連ビデオ チュートリアル: jQuery ビデオ チュートリアル

以上がjqueryでドロップダウンメニューを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。