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

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

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

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

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

私はサブメニュー 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");
});
});