Melaksanakan pengembangan berasaskan akordion dan keruntuhan menu navigasi berdasarkan jQuery

Melaksanakan pengembangan berasaskan akordion dan keruntuhan menu navigasi berdasarkan jQuery_jquery

WBOY

Lepaskan： 2016-05-16 15:17:09

asal

1301 orang telah melayarinya

Bab ini berkongsi contoh kod yang melaksanakan kesan mengembangkan dan meruntuhkan menu navigasi dalam mod akordion.

Contoh kod adalah seperti berikut:

代码实例如下:
<!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>

Salin selepas log masuk

Kod di atas mencapai keperluan kami Berikut ialah pengenalan kepada proses pelaksanaannya.

1. Kod ulasan:

(1).$(document).ready(function(){}), apabila struktur dokumen dimuatkan sepenuhnya, laksanakan kod dalam fungsi.
(2).$("dd:not(:first)").hide(), semua elemen dd kecuali elemen dd pertama disembunyikan, iaitu, submenu menu navigasi pertama dikembangkan dan yang lain disembunyikan .
(3).$("dt a").click(function(){}), daftarkan fungsi pemprosesan acara klik untuk elemen a di bawah elemen dt.
(4).$("dd:visible").slideUp("slow"), semua elemen dd yang dipaparkan dikecilkan dan disembunyikan melalui animasi.
(5).$(this).parent().next().slideDown("slow"), elemen induk yang sedang disambungkan kepada elemen a ialah elemen dt, dan elemen seterusnya bagi elemen dt ialah menu sekunder dd elemen. Menu ini berkembang secara animasi.
(6).return false, ini sangat penting untuk mengelakkan pautan daripada melompat.

Di atas ialah apa yang saya kongsikan dengan anda cara mengembangkan dan meruntuhkan menu navigasi dalam mod akordion berdasarkan jQuery.