ホームページ > 記事 > ウェブフロントエンド > jQuery_jqueryに基づいたアコーディオンベースのナビゲーションメニューの展開と折りたたみの実装
jQuery_jqueryに基づいたアコーディオンベースのナビゲーションメニューの展開と折りたたみの実装
- WBOYオリジナル
- 2016-05-16 15:17:091213ブラウズ
この章では、アコーディオン モードでのナビゲーション メニューの展開と折りたたみの効果を実装するコード例を紹介します。
コード例は次のとおりです:
代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<meta name="author" content="http://www.jb51.net/" />
<title>脚本之家</title>
<style>
dl{width:150px;}
dl,dd{margin:0;}
dt{
background:gray;
font-size:14px;
padding:2px;
margin:2px;
}
dt{color:#FFF;}
dd a{
color:#000;
font-size:12px;
}
ul{
list-style:none;
padding:2px;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(document).ready(function(){
$("dd:not(:first)").hide();
$("dt a").click(function(){
$("dd:visible").slideUp("slow");
$(this).parent().next().slideDown("slow");
return false;
});
});
</script>
</head>
<body>
<dl>
<dt><a href="#">脚本之家一</a></dt>
<dd>
<ul>
<li><a href="#">div教程</a></li>
<li><a href="#">css教程</a></li>
<li><a href="#">jquery教程</a></li>
</ul>
</dd>
<dt><a href="#">脚本之家二</a></dt>
<dd>
<ul>
<li><a href="#">正则教程</a></li>
<li><a href="#">脚本之家</a></li>
</ul>
</dd>
<dt><a href="#">脚本之家三</a></dt>
<dd>
<ul>
<li><a href="#">ajax教程</a></li>
<li><a href="#">softwhy.com</a></li>
<li><a href="#">js教程</a></li>
</ul>
</dd>
</dl>
</body>
</html>
上記のコードは要件を満たしています。ここではその実装プロセスを紹介します。
1. コードのコメント:
(1).$(document).ready(function(){})、ドキュメント構造が完全にロードされたら、関数内のコードを実行します。
(2).$("dd:not(:first)").hide()、最初の dd 要素を除くすべての dd 要素が非表示になります。つまり、最初のナビゲーション メニューのサブメニューが展開され、その他は非表示になります。 。
(3).$("dt a").click(function(){})、dt要素配下のa要素に対するクリックイベント処理関数を登録します。
(4).$("dd:visible").slideUp("slow") を実行すると、表示されているすべての dd 要素がアニメーションによって縮小され、非表示になります。
(5).$(this).parent().next().slideDown("slow")、a要素に現在接続されている親要素はdt要素であり、dt要素の次の要素はセカンダリメニューですdd 要素はアニメーションで展開します。
(6).return false。これはリンクのジャンプを防ぐために非常に重要です。
上記は、jQuery に基づいてアコーディオン モードでナビゲーション メニューを展開および折りたたむ方法を共有したものです。皆様のお役に立てば幸いです。