jqueryは収縮機能を備えた垂直ナビゲーションメニューを実現
5036 ワード
本稿では、垂直構造を有する比較的一般的なナビゲーションメニューについて説明します.ナビゲーションのメインタイトルをクリックすると、2級メニューを展開または折り畳むことができます.コードの例は次のとおりです.
上のコードは垂直ナビゲーションメニュー効果を実現しており、その実現過程を紹介します.一.プロセス分解を実現する:1.最外層のbox要素はナビゲーションバー全体を水平中央にすることができ、cssコードは以下の通りです.
2.折りたたみメニューの構造レイアウト:
フロントエンド・セクション htmlチュートリアル cssチュートリアル divチュートリアル jqueryチュートリアル
上のコードは折りたたみメニューの構造であり、メインナビゲーションのリンクaとしてdisplay:blockをブロックレベル要素に設定することでサイズを設定できるとともに、デフォルトでは2レベルメニューであるul要素が非表示、すなわち2レベルメニューが折りたたまれている.二.jqueryコードコメント:1.$(document).ready(function(){})は、ドキュメント構造が完全にロードされた後、関数のコードを実行します.2.$(".level1 > a").click(function(){})は、class属性値level 1要素の下の1級a要素にclickイベント処理関数、すなわちメインナビゲーションリンクにイベント処理関数を登録する.3.$(this).addClass("current").next().show().parent().siblings().children("a").removeClass("current").next().hide()は、このコードはチェーン呼び出し効果であり、メインナビゲーションリンクをクリックして現在のメインナビゲーションの後ろの2級メニュー展開を実現し、他のメニュー折り畳み効果を実現します.4.return false、メインナビゲーションリンクのジャンプ効果をキャンセルします.
以上が本稿のすべてであり,jqueryプログラム設計の学習に役立つことを期待する.
$(document).ready(function(){
$(".level1 > a").click(function(){
$(this).addClass("current")
.next().show()
.parent().siblings().children("a").removeClass("current")
.next().hide();
return false;
});
});
上のコードは垂直ナビゲーションメニュー効果を実現しており、その実現過程を紹介します.一.プロセス分解を実現する:1.最外層のbox要素はナビゲーションバー全体を水平中央にすることができ、cssコードは以下の通りです.
.box{
width:150px;
margin:0 auto;
}
2.折りたたみメニューの構造レイアウト:
フロントエンド・セクション
上のコードは折りたたみメニューの構造であり、メインナビゲーションのリンクaとしてdisplay:blockをブロックレベル要素に設定することでサイズを設定できるとともに、デフォルトでは2レベルメニューであるul要素が非表示、すなわち2レベルメニューが折りたたまれている.二.jqueryコードコメント:1.$(document).ready(function(){})は、ドキュメント構造が完全にロードされた後、関数のコードを実行します.2.$(".level1 > a").click(function(){})は、class属性値level 1要素の下の1級a要素にclickイベント処理関数、すなわちメインナビゲーションリンクにイベント処理関数を登録する.3.$(this).addClass("current").next().show().parent().siblings().children("a").removeClass("current").next().hide()は、このコードはチェーン呼び出し効果であり、メインナビゲーションリンクをクリックして現在のメインナビゲーションの後ろの2級メニュー展開を実現し、他のメニュー折り畳み効果を実現します.4.return false、メインナビゲーションリンクのジャンプ効果をキャンセルします.
以上が本稿のすべてであり,jqueryプログラム設計の学習に役立つことを期待する.