suchen

Heim >Web-Frontend >js-Tutorial >jquery-Methode zum einfachen Reduzieren und Erweitern von Webseitenpanels_jquery

jquery-Methode zum einfachen Reduzieren und Erweitern von Webseitenpanels_jquery

WBOY
WBOYOriginal
2016-05-16 15:41:161230Durchsuche

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.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：jquery implementiert den anklickbaren teleskopischen und erweiterbaren Menüeffekt code_jqueryNächster Artikel：jquery implementiert den anklickbaren teleskopischen und erweiterbaren Menüeffekt code_jquery

In Verbindung stehende Artikel

Mehr sehen