コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > JQuery_jquery に基づいた折りたたみメニュー コードの簡単な実装

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

WBOY
リリース： 2016-05-16 18:19:34
オリジナル
886 人が閲覧しました

メニューは第 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 レベルのメニューを表示するように設定します }) })
関連ラベル：
メニューを折りたたむ
ソース：php.cn
前の記事：JavaScript リアル画像カウントダウン実装コード_時刻と日付 次の記事：jQuery パッケージに基づいた自動切り替え機能を備えたフェードインおよびフェードアウト スライドショー プラグイン download_jquery
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
モバイル ビューで、ユーザーがリンクをクリックしたときにこのナビゲーション バーを閉じるにはどうすればよいですか? ユーザーがリンクをクリックして Web サイトを閲覧すると、ナビゲーション バーが閉じませんか?ナビゲーション バーを閉じるために、クリック イベント リスナーを各リンクに追加しよ...
から 2024-04-06 19:23:03
0
1
411
非表示のサイドパネルを表示: チェックが入っています アニメーション化されたハンバーガー メニューを介してビューに切り替える機能を備えたナビゲーション メニューをサイド パネルに追加したいと考えています。 JSを使わずにCSSだけで作...
から 2024-04-06 15:49:33
0
1
319
Javascript/Jqueryを使用してボタンなしでフォームを送信する JavaScript 関数を呼び出し、JQUERY/PHP を使用してフォームを実行することにより、ボタンのないフォームを送信しようとしています。ページを再読み込みせずに、バックエ...
から 2024-04-06 14:54:03
0
2
421
CollapseDisplay クラスを使用してブートストラップ アコーディオン ヘッダーの外観をカスタマイズする class Collapseshow を使用してパネルのカード タイトルのスタイルを設定したいと考えています。この例では、最初のパネルです。 CSS を使用して .accordio...
から 2024-04-06 12:53:11
0
1
376
ナビゲーションバーの中央のドロップダウンメニュー このCSS/HTMLを作りました。 .navbar{幅:100%;背景色:rgb(151,44,44);オーバーフロー:自動;}.navbara{border-right:1pxs...
から 2024-04-04 18:24:52
0
1
338
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート