recherche

Maison  >  Article  >  interface Web  >  jQuery implémente un panneau accordéon extensible et réduit menu_jquery

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

WBOY
WBOYoriginal
2016-05-16 15:39:161273parcourir

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>

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

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：jQuery implémente simplement l'effet de menu déroulant à deux niveaux code_jqueryArticle suivant：jQuery implémente simplement l'effet de menu déroulant à deux niveaux code_jquery

Articles Liés

Voir plus