ホームページ >ウェブフロントエンド >jsチュートリアル >動的menu_jqueryを実装するjqueryのサンプルコード

動的menu_jqueryを実装するjqueryのサンプルコード

WBOYオリジナル: 2016-05-16 17:12:101301ブラウズ

jquery が動的メニューを実装する方法は、jquery ポップアップウィンドウが JavaScript を使用して CSS を操作する方法と似ています。

具体的な手順は次の手順に分けることができます:

•表現したいメニューを含むHTMLページを作成します

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

jquery の例 2: jquery menu

<

私はサブメニュー 2

id="content">

•メニューの表示を制御する CSS ファイルを作成します

コードをコピー

コードは次のとおりです。 /*すべての li に小さなドットが表示されないようにするには、css タグセレクターを使用できます*/li{ /*リストの前の小さなドットを非表示にします*/ list-style: none;

/*インデント効果*/

 margin-left: 18px;
 /*メニューを非表示*/
 表示: none;
}
a{ 
 /*テキストの表示方法*/
 text-decoration: none;
}


•メニューの表示を制御する JavaScript ファイルを作成します

コードをコピーします

コードは次のとおりです:/* * メインメニューとサブメニューをクリックしますが表示されます。メインメニューをもう一度クリックすると、サブメニューが非表示になります * ロード時にメインメニューに onclick イベントを追加するコードを記述する必要があります。メインメニューをクリックしてサブメニューを表示できるようにします。 * メソッドが実行されました。登録ページがロードされるとき

$(document).ready(function(){
 //var uls = $("ul ");
 //以下のノードを見つけますul
 var as = $("ul > a");
 as.click(function(){
 //まず現在の ul li を で見つけてから、li に 
 を表示させます / /現在クリックされている ul ノードを取得します
 var aNode = $(this);
 //クリックされた ul ノードの下にあるすべての li ノードを検索します
 var lis = aNode.nextAll("li");
 // ul
 の li 子ノードを表示または非表示にします。 lis.toggle("slow");
 });
}); 

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：javascript_javascript スキルでテーブルを動的にロードし、テーブル行を動的に追加する方法次の記事：javascript_javascript スキルでテーブルを動的にロードし、テーブル行を動的に追加する方法

続きを見る

動的menu_jqueryを実装するjqueryのサンプルコード

関連記事