jQuery_jqueryに基づいたアコーディオンベースのナビゲーションメニューの展開と折りたたみの実装-jsチュートリアル-php.cn

jQuery_jqueryに基づいたアコーディオンベースのナビゲーションメニューの展開と折りたたみの実装

WBOY

リリース： 2016-05-16 15:17:09

オリジナル

1258 人が閲覧しました

この章では、アコーディオンモードでのナビゲーションメニューの展開と折りたたみの効果を実装するコード例を紹介します。

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

代码实例如下:
<!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 に基づいてアコーディオンモードでナビゲーションメニューを展開および折りたたむ方法を共有したものです。皆様のお役に立てば幸いです。