cari

Rumah >hujung hadapan web >tutorial js >jQuery melaksanakan menu_jquery panel akordion boleh dikembangkan dan runtuh

jQuery melaksanakan menu_jquery panel akordion boleh dikembangkan dan runtuh

WBOY
WBOYasal
2016-05-16 15:39:161295semak imbas

Contoh dalam artikel ini menerangkan cara jQuery melaksanakan menu panel akordion yang boleh dikembangkan dan diruntuhkan. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Ini ialah menu lipat biasa, panel lipat akordion yang akan mengembang dan runtuh dengan kesan animasi Flash Sila ambil perhatian apabila mengubah suai:

slideUp: Sembunyikan semua elemen padanan secara dinamik dengan menukar ketinggiannya (menurun ke atas), secara pilihan mencetuskan fungsi panggil balik selepas penyembunyian selesai. Kesan animasi ini hanya melaraskan ketinggian elemen, membenarkan elemen padanan disembunyikan dalam cara "gelongsor".

slideDown: Paparkan secara dinamik semua elemen padanan melalui perubahan ketinggian (meningkat ke bawah), secara pilihan mencetuskan fungsi panggil balik selepas paparan selesai. Kesan animasi ini hanya melaraskan ketinggian elemen, membenarkan elemen padanan dipaparkan dalam cara "gelongsor"

Tangkapan skrin kesan berjalan adalah seperti berikut:

Alamat demo dalam talian adalah seperti berikut:

http://demo.jb51.net/js/2015/jquery-slide-up-down-sfq-style-menu-codes/

Kod khusus adalah seperti berikut: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>折叠菜单</title>
<script src="jquery1.3.2.js"></script>
<script>
$(document).ready(function(){
$("dd:not(:first)").hide(); //隐藏 dd不是第一个的. E:first:相当于E:eq(0) 
// $("dd:not(:last)").hide(); //试试$("dd:not(:last)").hide();
$("dt a").click(function(){
$("dd:visible").slideUp("slow");
 $(this).parent().next().slideDown("slow");
return false;
});
});
</script> 
<style>
 dl { width: 150px; }
 dl,dd { margin: 0; }
 dt { background: gray; font-size: 14px; padding: 2px; margin: 2px; }
 dt a { color: #FFF; }
 dd a { color: #000;font-size: 12px; }
 ul { list-style: none; padding: 2px; }
</style>
</head>
<body>
<dl>
<dt><a href="#">ASP</a></dt>
 <dd>
 <ul>
  <li><a href="#">论坛社区</a></li>
  <li><a href="#">新闻文章</a></li>
  <li><a href="#">企业网站</a></li>
 </ul>
 </dd>
<dt><a href="#">PHP</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="#">JQUERY</a></li>
  <li><a href="#">JAVASCRIPT</a></li>
 </ul>
 </dd>
</dl>
</body>
</html>

Saya harap artikel ini akan membantu pengaturcaraan jQuery semua orang.

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：jQuery hanya melaksanakan kesan menu lungsur dua peringkat code_jqueryArtikel seterusnya：jQuery hanya melaksanakan kesan menu lungsur dua peringkat code_jquery

Artikel berkaitan

Lihat lagi