JQuery は豪華な水平ドロップダウン menu_jquery を実装します

a{
//すべての下線をキャンセルします
text-decoration:none;
padding-left:20px;
display:block; /*ブロックセット要素は領域を埋めることができます*/
表示:インラインブロック;
パディングトップ:3px;
}
.hmain{
色:白;
background-image:url(../images/collapsed.gif);
background-repeat:no-repeat;
}
.hmain li a {
色:黒;
背景画像:なし;
.hmain ul{
表示:なし;
float: left;
margin-right:1px;
}



js ファイル jquery.js が参照されます。 HTML では、menu.js は次のとおりです:




コードをコピー


コードは次のとおりです:


$(document).ready( function(){
//ページ内の DOM がロードされると、実行されたコード
$(".main>a,.hmain a").click( function(){
//メイン メニュー項目に対応するサブメニュー項目が見つかりました
var ulNode=$(this).next("ul");
ulNode.slideToggle(); $(this));
} );
$(".hmain").hover(function(){
$(this).children ("ul").slideToggle();
changeIcon($(this).children( "a"));
},function(){
$(this).children("ul").slideToggle(); (this).children("a") );
})

}
}


この豪華なドロップダウン メニューが完成しました。実装は非常にシンプルですが、内部の知識ポイントは非常に断片的です。例: .main a と .main>a の違いは、前者は .main のこのクラスの要素コンテンツを使用してすべての a ノードを選択するのに対し、後者は .main の子ノードの中からノードのみを選択することです。

このような例は、Web サイトで使用すると、インターフェイスがより美しくなります。3 つだけなので、急いで読み続けてください。