Das Beispiel in diesem Artikel beschreibt, wie JQuery das einfache Schließen und Erweitern von Webseitenfenstern implementiert. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:
Dies ist ein allgemeiner Code zum Reduzieren (Verkleinern) und Erweitern von Panels auf Webseiten. Er verwendet das jQuery-Plug-in, um den Code zu vereinfachen Beliebter Effekt im Internet. Es gibt wirklich viele Funktionen, die dadurch erweitert werden können. Solange Sie Ihr Gehirn verwenden, können Sie dies auf jeden Fall tun.
Der Screenshot des Laufeffekts sieht wie folgt aus:
Die Online-Demo-Adresse lautet wie folgt:
http://demo.jb51.net/js/2015/jquery-simple-hidden-show-web-table-codes/
Der spezifische Code lautet wie folgt:
<!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>Ich hoffe, dass dieser Artikel für das JQuery-Programmierungsdesign aller hilfreich sein wird.
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
