suchen

Heim  >  Artikel  >  Web-Frontend  >  Ein vollständiges Beispiel der von jQuery implementierten Anzeige- und Ausblendfunktion mit nur 3 Zeilen code_jquery

Ein vollständiges Beispiel der von jQuery implementierten Anzeige- und Ausblendfunktion mit nur 3 Zeilen code_jquery

WBOY
WBOYOriginal
2016-05-16 15:37:201301Durchsuche

Das Beispiel in diesem Artikel beschreibt die von jQuery implementierten Anzeige- und Ausblendfunktionen mit nur 3 Codezeilen. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Die jQuery-Technologie ist sehr einfach zu verwenden. Sie kann die gewünschten Funktionen tatsächlich mit nur 3 Zeilen Code implementieren genug. Großartig.

Der Screenshot des Laufeffekts sieht wie folgt aus:

Die Online-Demo-Adresse lautet wie folgt:

http://demo.jb51.net/js/2015/jquery-simple-hide-show-style-demo/

Der spezifische Code lautet wie folgt: 

<!doctype html>
<html>
<head>
<meta charset="gbk" />
<title>3行代码实现显示与隐藏</title>
<script type="text/javascript" src="jquery1.3.2.js"></script>
<style>
  .showmore{ float:left;}
  .cont .aa {
  height: auto;
  width: 400px;
  border: 1px solid #000000;
  margin-bottom: 10px;
  padding-right: 10px;
  padding-left: 10px;
  float: left;
  }
  .cont .aa .a1 {
  float: left;
  height: 30px;
  width: 300px;
  }
  .cont .aa .a2 {
  height: 30px;
  width: 350px;
  float: left;
  display:none;
  }
 </style>
</head>
<body>
<div class="cont">
 <div class="aa">
  <div class="a1">tab1</div>
  <div class="showmore"><a href="#"><span>显示</span></a></div>
  <div class="a2">详细说明：今天你要嫁给我嘛~</div>
 </div>
 <div class="aa">
  <div class="a1">tab2</div>
  <div class="showmore" ><a href="#"><span>显示</span></a></div>
  <div class="a2">详细说明：北京、上海四日游</div>
 </div>
 <div class="aa">
  <div class="a1">tab3</div>
  <div class="showmore" ><a href="#"><span>显示</span></a></div>
  <div class="a2">详细说明：河南是华夏文明的根源</div>
 </div>
</div>
<script>
$(".showmore a span").mouseover(function(e){
 $(this).html(["显示", "隐藏"][this.hutia^=1]);
 $(this.parentNode.parentNode).next().toggle();
 e.preventDefault();
});
</script>
</body>
</html>

Ich hoffe, dass dieser Artikel für alle bei der jQuery-Programmierung 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：Verwenden Sie die Methoden show() und hide(), um Bilder in Jquery_jquery zu animieren und auszublendenNächster Artikel：Verwenden Sie die Methoden show() und hide(), um Bilder in Jquery_jquery zu animieren und auszublenden

In Verbindung stehende Artikel

Mehr sehen