jquery の入門—ナビゲーション バーの作成 (スケーラブル)_jquery

1. ナビゲーション バー を作成します。タイトルをクリックすると、ナビゲーション バーのコンテンツを拡大および縮小したり、コンテンツを簡略化したり、より多くのコンテンツを表示したりできます。
サンプル コードは次のとおりです:

コードをコピーします コードは次のとおりです:

TITLE>/TITLE>
NAME="キーワード" CONTENT="">



<スクリプト タイプ="text/javascript"> ;
$(function(){ //ページ読み込みイベント
$(".clsHead").click(function(){ //画像クリックイベント
if($ (".clsContent"). is(":visible")){ //コンテンツが表示されている場合
$(".clsHead spam img").attr("src","Images/a1.gif") ; //画像を変更します
$ (".clsContent").css("display","none") //コンテンツを非表示
}else{
$(".clsHead spam img"); .attr("src","Images/ a2.gif"); //画像を変更します
$(".clsContent").css("display","block");//コンテンツを表示します
}
});
$ (".clsBot > a").click(function(){ //ホットリンク クリック イベント
if($(".clsBot > a").text ()=="Simplify"){ // コンテンツが '簡略化' の場合
$("ul li:gt(4):not(:last)").hide(); // インデックス付きの要素を非表示にする4 より大きく、最後の項目ではない数値
$(".clsBot > a").text("more"); //文字の内容を "more" に変更します
}else{
$ ("ul li:gt(4): not(:last)").show().addClass("GetFocus"); //選択した要素を表示し、style
$(".clsBot > a") ).text("Simplify") / /文字の内容を "簡素化" に変更します
}
});

書籍カテゴリ

小説
;li>文学 ( 230 )

• 青少年 ( 1430 )


• 子供 ( 1560 )


• 人生 ( 870 )
  
• 社会科学
  
• ;a href="#">管理 ( 1450 )


• /a> ( 1780 )


• ;/i>


• 参考書 ( 3450 )
🎜>
• 導入バージョン ( 980 )
その他のカテゴリ< ;/a> ( 3230 )



簡略化
>




2. レンダリング :





クリック後:




簡略化:

このウェブサイトの声明

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