So verwenden Sie JQuery, um den Effekt zum Erweitern und Verkleinern von Klicks zu erzielen-HTML-Kenntnisse-php.cn

So verwenden Sie JQuery, um den Effekt zum Erweitern und Verkleinern von Klicks zu erzielen

藏色散人

Freigeben： 2019-05-11 17:57:50

Original

12387 Leute haben es durchsucht

Wenn wir einen langen Text lesen, klicken wir normalerweise auf die Schaltfläche „Erweitern“ oder „Reduzieren“. Der Effekt trägt offensichtlich zur Verbesserung des Benutzers bei Erfahrung. Verwenden Sie dann jquery, um den Effekt zum Erweitern und Verkleinern durch Klicken zu erzielen. Um den Effekt zum Erweitern und Ausblenden nach oben und unten zu erzielen, können Sie die Methoden slideUp () und slideDown () in jQuery verwenden, um dies zu erreichen.

So verwenden Sie JQuery, um den Effekt zum Erweitern und Verkleinern von Klicks zu erzielen

Im Folgenden stellen wir Ihnen die Methode von jquery zur Erzielung des Effekts zum Erweitern und Verkleinern von Klicks anhand spezifischer Codebeispiele vor.

Das Codebeispiel lautet wie folgt:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jquery实现点击展开收缩效果示例</title>
    <style type="text/css">
 .box{
            width: 400px;
 background: #f0e68c;
 border: 1px solid #a29415;
 }
        .box-inner{
            padding: 10px;
 }
    </style>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
 $(document).ready(function(){
            $(".slide-up").click(function(){
                $(".box").slideUp();
 });
 $(".slide-down").click(function(){
                $(".box").slideDown();
 });
 });
 </script>
</head>
<body>
<button type="button" class="slide-up">关闭</button>
<button type="button" class="slide-down">展开</button>
<hr>
<div class="box">
    <div class="box-inner">新浪娱乐讯 据台湾媒体报道，2018MAMA香港场14日晚间7点盛大展开颁奖典礼，嘻哈、性感、抒情各种团体
    合作的舞台表演精彩绝伦，《ETtoday》全程独家直播典礼现场，为观众快速整理8大看点，从防弹RM流利的英文演讲开场，到最后防弹内
    心告白曾想解散，全场零冷场。</div>
</div>
</body>
</html>

Nach dem Login kopieren

Im obigen Code haben wir zwei Divs erstellt, box und box-inner, die Text enthalten. Wenn wir auf die Schaltflächen „Schließen“ und „Erweitern“ klicken, werden diese angezeigt werden jeweils die Methoden slideUp() und slideDown() aufgerufen. Die Methode

slideUp() blendet das ausgewählte Element mithilfe eines Schiebeeffekts aus, wenn das Element bereits angezeigt wird. Die Methode

slideDown() zeigt ausgeblendete ausgewählte Elemente mithilfe eines Gleiteffekts an.

Der endgültige Effekt ist wie folgt:

So verwenden Sie JQuery, um den Effekt zum Erweitern und Verkleinern von Klicks zu erzielen

Hinweis: slideDown() eignet sich für Elemente, die durch die jQuery-Methode ausgeblendet werden, oder in CSS Deklarieren Sie display:none, um Elemente auszublenden (gilt nicht für Elemente, die über Visibility:hidden ausgeblendet werden).

In diesem Artikel geht es um die spezifische Methode von jquery, um den Klick-Erweiterungs- und Verkleinerungseffekt zu erzielen. Ich hoffe, dass es für Freunde in Not hilfreich ist.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie JQuery, um den Effekt zum Erweitern und Verkleinern von Klicks zu erzielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!