検索

ホームページ >ウェブフロントエンド >jsチュートリアル >JQuery_jquery に基づいた折りたたみメニュー コードの簡単な実装

JQuery_jquery に基づいた折りたたみメニュー コードの簡単な実装

WBOY
WBOYオリジナル
2016-05-16 18:19:34914ブラウズ

メニューは第 2 レベルのメニューで、初期化時には折りたたまれていますが、大きな項目タイトルをクリックすると展開されて第 2 レベルのリストが表示されます。
HTML コードは次のとおりです:

コードをコピー コードは次のとおりです:


更新プロセス< ;/ spa>


FAQ 管理
🎜>



;ダウンロード管理





その中でも、JQUERY スクリプトは、わずか数行で目的の効果を実現できます。具体的なコードは次のとおりです。




コードをコピー


コードは次のとおりです。


< script language=" javascript" type="text/javascript">
$(document).ready(function () {
//二次メニューを非表示に設定します
$(".FAQlist" ).css ("display", "none");
//第 1 レベルのメニューをクリックするとトリガーされるイベント$(".bartitleFAQ").click(function () { $( ".FAQlist") .css("display", "none");//すべての二次メニューを非表示に設定します$(this).next(".FAQlist").css("display", "block "); //現在の第 1 レベルのメニューの第 2 レベルのメニューを表示するように設定します }) })
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：JavaScript リアル画像カウントダウン実装コード_時刻と日付次の記事：JavaScript リアル画像カウントダウン実装コード_時刻と日付

関連記事

続きを見る