jQuery melaksanakan menu_jquery panel akordion boleh dikembangkan dan runtuh-tutorial js-php.cn

jQuery melaksanakan menu_jquery panel akordion boleh dikembangkan dan runtuh

WBOY

Lepaskan： 2016-05-16 15:39:16

asal

1280 orang telah melayarinya

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>

Salin selepas log masuk

Saya harap artikel ini akan membantu pengaturcaraan jQuery semua orang.