recherche

Maison  >  Article  >  interface Web  >  méthode jquery pour implémenter un effondrement et une expansion simples de la page Web panels_jquery

méthode jquery pour implémenter un effondrement et une expansion simples de la page Web panels_jquery

WBOY
WBOYoriginal
2016-05-16 15:41:161181parcourir

L'exemple de cet article décrit comment jquery implémente la fermeture et l'expansion simples des panneaux de pages Web. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Il s'agit d'un code courant pour réduire (réduire) et agrandir les panneaux sur les pages Web. Il utilise le plug-in jQuery pour simplifier le code. Cliquez sur la barre de titre du panneau pour réduire ou agrandir le calque. effet populaire sur Internet. Il existe vraiment de nombreuses fonctions qui peuvent être étendues à partir de cela. Tant que vous utilisez votre cerveau, vous pouvez certainement le faire.

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-simple-hidden-show-web-table-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 xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>网页上的层收缩、伸展面板代码</title>
<style type="text/css">
*{margin:0;padding:0;} 
body { font-size: 13px; line-height: 130%; padding: 60px }
#panel { width: 300px; border: 1px solid #0050D0 }
.head { padding: 5px; background: #96E555; cursor: pointer }
.content { padding: 10px; text-indent: 2em; border-top: 1px solid #0050D0;display:block; }
</style>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(function(){
 $("#panel h5.head").toggle(function(){
  $(this).next("div.content").hide();
 },function(){
  $(this).next("div.content").show();
 })
})
</script>
</head>
<body>
<div id="panel">
 <h5 class="head">点击此处标题可展开</h5>
 <div class="content">
  一款基于jquery的伸展面板代码，点击面板的标题栏即可折叠、或展开这个层，貌似网上很流行的效果，引用了jQuery插件，使得本款效果更加的简洁实用， </div>
</div>
</body>
</html>

J'espère que cet article sera utile à la conception de 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 l'effet de menu télescopique et extensible cliquable code_jqueryArticle suivant：jquery implémente l'effet de menu télescopique et extensible cliquable code_jquery

Articles Liés

Voir plus