jQuery は、縮小可能および拡張可能なカスケード メニューの例を実装します code_javascript スキル

フレームワークを使用せずに純粋な JavaScript コードを使用する場合、カスケード メニューの作成は困難な作業になるかもしれませんが、フレームワークを使用すると、これが非常に簡単になります。これはフレームワークの利点であり、開発効率が大幅に向上します。より信頼性が高く、保守が容易です。 jQuery を使用してカスケード メニューを実装する一般的な手順は次のとおりです:

•1. まず、

コードをコピーします。 コードは次のとおりです。 "http://www.w3 .org /TR/html4/loose.dtd">


















< a href= "#" mce_href="#">私はメニュー 1

• 私はサブメニュー 1
  
• サブメニュー 2







私はメニュー 2

• 私はサブメニュー 3


• 私はサブメニュー 4< / li>
  







•2. カスケード メニューの縮小を制御する JavaScript コードを作成します。





コードをコピー コードは次のとおりです:// をクリックする必要があります。メインメニュー上 ボタンを押すと、対応するサブメニューが表示されます。サブメニューを再度クリックすると、サブメニューが非表示になります。

//ページがロードされたら、すべてのメインメニューに onclick イベントを追加する必要があります。 >//メインメニューがクリックできることを確認します。サブメニューを表示または非表示にします

//登録ページがロードされたときに実行されるメソッド
$(document).ready(function() {
//ここで必要になりますまずすべてのメイン メニューを検索します
//次に、すべてのメイン メニューのクリック イベントを登録します
// ul
でノードを検索します var as = $("ul > a");
as .click(function() {
// ここでは、現在の ul で li を見つけて、li を表示する必要があります
// 現在クリックされているノードを取得します
var aNode = $(this) ;
//現在の a ノードのバイトポイントのすべての li 兄弟を検索します
var lis = aNode.nextAll("li");
//子ノードを表示または非表示にします
lis.toggle( "show");
});
});


•ラベルの表示効果を制御する CSS ファイルを作成します





コードをコピー

コードは次のとおりです: /*すべての li に小さなドットが表示されないようにするには、CSS タグ セレクター*/ を使用できます。 li {

list-style: none; /* li の前の小さなドットを非表示にします*/

margin-left: /* インデント効果を実現するためにサブメニューを右に移動します* /
display: none; /*すべてのサブメニューを最初に非表示にする*/
}
a{
text-decoration: none; /*リンクの下線を非表示にする*/
}


jQuery がもたらす利便性:

1. クリックされたメニューを検索する場合、必要な $(this) は 1 つだけです

2. ノードを表示または非表示にするには、toggle() という 1 つのステートメントだけが必要です。また、この関数を配列内のすべてのノードに実装することもできます。

3. 特定のタグの下にあるすべてのタグを検索します: $("ul > a")