suchen

Heim  >  Artikel  >  Web-Frontend  >  jquery implementiert das Klicken, um die Liste zu erweitern, während andere Listen_jquery ausgeblendet werden

jquery implementiert das Klicken, um die Liste zu erweitern, während andere Listen_jquery ausgeblendet werden

WBOY
WBOYOriginal
2016-05-16 15:46:031358Durchsuche

Das Beispiel in diesem Artikel beschreibt die jquery-Implementierung des Klickens zum Erweitern einer Liste, während andere Listen ausgeblendet werden. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Jquery wird hier verwendet, um Erweiterungs- und Ausblendungseffekte zu implementieren. Nach dem Klicken auf den Listentitel wird der Inhalt des Elements erweitert und andere Elemente verkleinert, d. h. sie werden nicht angezeigt. Es ist eine Frage der persönlichen Präferenz. Manche Leute möchten den Inhalt anderer Optionen nicht standardmäßig anzeigen. Dies ist der Fall und dient nur als Referenz.

Der Screenshot des Laufeffekts sieht wie folgt aus:

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>js点击展开列表</title>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
</head>
<script type="text/javascript">
// 收缩展开效果
$(document).ready(function(){
$('.box').click(function(){
$(this).children('.text').slideToggle().parents('.box').siblings('.box').children('.text').hide();
})  
});
</script>
<style type="text/css">
.box{width:200px; margin:0 auto; background:#CCC;}
.text{display:none;}
</style>
<body>
<div class="box">
  <h2>对ASP擅长的程序</h2>
  <div class="text">论坛类和文章类</div>
  </div>
</div>
<div class="box">
  <h2>对PHP擅长的程序</h2>
  <div class="text">博客类和新闻类</div>
  </div>
</div>
<div class="box">
  <h2>对前端擅长的插件</h2>
  <div class="text">jquery</div>
  </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：Javascript implementiert kontinuierliche Zuweisung_Javascript-FähigkeitenNächster Artikel：Javascript implementiert kontinuierliche Zuweisung_Javascript-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen