jQuery implementiert den Click-to-Display-Dropdown-Effekt für Inhalte-js-Tutorial-php.cn

jQuery implementiert den Click-to-Display-Dropdown-Effekt für Inhalte

小云云

Freigeben： 2018-01-23 11:30:27

Original

2119 Leute haben es durchsucht

Dieser Artikel stellt hauptsächlich die Implementierung des Click-to-Display-Inhalts-Dropdown-Effekts basierend auf der Ereignissteuerung vor, einschließlich der jQuery-Ereignisantwort und der dynamischen Bedienung von Elementattributen. Ich hoffe, dass er hilfreich sein kann alle.

1. Beispielcode:

<!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>jQuery事件</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<style type="text/css">
  body{
    font-family:微软雅黑;
    font-size:12px;
    font-stretch:normal;
    background-color:!important;
    width:400px;
    height:auto;
  }
  .total{
    border:#00FF00 solid 1px;
    font-size:12px;
  }
  .module{
    padding:6px;
    font-size:14px;
    font-weight:bolder;
    background-color:#FC6;
  }
  .content{
    padding:8px;
    font-size:12px;
    font-family:微软雅黑;
    text-align:center;
    display:none;
  }
  .open{
    background-color:#0000FF;
  }
</style>
<script type="text/javascript">
   $(function(){
      $(".content").html("你好，欢迎来到脚本之家！");
      $(".module").click(function(){
        $(this).addClass("open").next(".content").css("display","block");
        $(this).css("color","#FFFFF");
      });
   });
</script>
</head>
<body>
  <p class="total">
    <p class="module">模块</p>
    <p class="content"></p>
  </p>
</body>
</html>

Nach dem Login kopieren

2. Beispielergebnis:

(1) Initialisierung

(2) Klicken Sie auf „Modul“

Verwandte Empfehlungen:

JS zum Implementieren klicken Schleife So wechseln Sie den angezeigten Inhalt

Angular implementiert die Zeitplanfunktion (kann den angezeigten Inhalt hinzufügen und ausblenden). Detaillierte Erklärung

CSS, wie um Inhalte im Beispielcode im Angular4-Stil anzuzeigen

Das obige ist der detaillierte Inhalt vonjQuery implementiert den Click-to-Display-Dropdown-Effekt für Inhalte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!