Rumah > Artikel > hujung hadapan web > Melaksanakan pengembangan berasaskan akordion dan keruntuhan menu navigasi berdasarkan jQuery_jquery

Melaksanakan pengembangan berasaskan akordion dan keruntuhan menu navigasi berdasarkan jQuery_jquery

WBOYasal: 2016-05-16 15:17:091213semak imbas

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>

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.

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Penjelasan terperinci tentang penggunaan dan perbezaan ini, hubungi dan gunakan dalam JavaScriptArtikel seterusnya：Penjelasan terperinci tentang penggunaan dan perbezaan ini, hubungi dan gunakan dalam JavaScript

Artikel berkaitan

Lihat lagi