jQuery implémente un panneau accordéon extensible et réduit menu

jQuery implémente un panneau accordéon extensible et réduit menu_jquery

WBOY

Libérer： 2016-05-16 15:39:16

original

1280 Les gens l'ont consulté

L'exemple de cet article décrit comment jQuery implémente un menu de panneau en accordéon qui peut être développé et réduit. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Il s'agit d'un menu pliant commun, un panneau pliant en accordéon qui se développera et se réduira avec un effet d'animation Flash. Veuillez noter lors de la modification :

slideUp : masquez dynamiquement tous les éléments correspondants en modifiant leur hauteur (en diminuant vers le haut), déclenchant éventuellement une fonction de rappel une fois le masquage terminé. Cet effet d'animation ajuste uniquement la hauteur de l'élément, permettant de masquer les éléments correspondants de manière "coulissante".

slideDown : affiche dynamiquement tous les éléments correspondants via des changements de hauteur (augmentant vers le bas), déclenchant éventuellement une fonction de rappel une fois l'affichage terminé. Cet effet d'animation ajuste uniquement la hauteur de l'élément, permettant d'afficher les éléments correspondants de manière "coulissante"

La capture d'écran de l'effet en cours d'exécution est la suivante :

L'adresse de la démo en ligne est la suivante :

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

Le code spécifique est le suivant :

<!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>

Copier après la connexion

J'espère que cet article sera utile à la programmation jQuery de chacun.