jQuery verwendet die Funktionen hide() und toggle(), um die Funktion zum Ausblenden der Kameramarkenanzeige zu realisieren

jQuery verwendet die Funktionen hide() und toggle(), um die Funktion zum Ausblenden der Kameramarkenanzeige zu realisieren

Als ich kürzlich jQuery lernte, stieß ich auf die Funktionen show(), hide() und toggle(). Also habe ich diese Funktionen verwendet, um das Anzeigen und Ausblenden von Elementen zu üben:

Tipp: Die kleinen Symbole zum Auf- und Abschalten der Tasten im Code können Sie dem Bild der Markenanzeigefunktion unter diesem Link entnehmen

<!DOCTYPE html>
<html lang="de">
<Kopf>
  <meta charset="UTF-8">
  <title>Verwenden Sie die Funktionen hide() und toggle(), um Kameramarken anzuzeigen</title>
  <style type="text/css">
    * {
      Rand: 0;
      Polsterung: 0;
    }

    Körper {
      Schriftgröße: 12px;
      Textausrichtung: zentriert;
    }

    A {
      Farbe: #04D;
      Textdekoration: keine;
    }

    ein:schweben {
      Farbe: #F50;
      /*Das Textdekorationsattribut gibt die dem Text hinzugefügte Dekoration an, z. B. Unterstreichen, Überstreichen, Durchstreichen usw. */
      Textdekoration: Unterstreichen;
    }

    .UnterkategorieBox {
      Breite: 600px;
      Rand: 0 automatisch;
      Textausrichtung: zentriert;
      Rand oben: 40px;
    }

    .SubCategoryBox ul {
      Listenstil: keiner;
    }

    .SubCategoryBox ul li {
      Anzeige: Block;
      schweben: links;
      Breite: 200px;
      Zeilenhöhe: 20px;
    }

    .mehr anzeigen, .weniger anzeigen {
      klar: beides;
      Textausrichtung: zentriert;
      Polsterung oben: 10px;
    }

    .showmore ein, .showless ein {
      Anzeige: Block;
      Breite: 120px;
      Rand: 0 automatisch;
      Zeilenhöhe: 24px;
      Rand: 1px durchgezogen #AAA;
    }

    .showmore eine Spanne {
      Polsterung links: 15px;
      /*Die letzten beiden Ziffern sind der Offset von der oberen linken Ecke (0,0). Die erste Ziffer ist der Offset auf der X-Achse, also der horizontale Offset. Positiv bedeutet rechts, negativ bedeutet links!
       Die zweite Zahl ist der Versatz auf der Y-Achse, also der horizontale Versatz, positiv bedeutet nach unten, negativ bedeutet nach oben!*/;
      Hintergrund: URL (img/down.gif) keine Wiederholung 0 3px;
    }

    .showless eine Spanne {
      Polsterung links: 15px;
      Hintergrund: URL (img/up.gif) keine Wiederholung 0 3px;
    }

    .förderte ein {
      Farbe: #F50;
    }
  </Stil>
  <script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  <Skripttyp="text/javascript">
    $(Funktion () {
      //Nachdem die Seite geladen wurde, zuerst einige Kameramarken ausblenden $("ul li:gt(5):not(:last)").hide();
      // Die Filterfunktion filtert die Menge der Elemente heraus, die dem angegebenen Ausdruck entsprechen. Mit dieser Methode wird der Übereinstimmungsbereich eingegrenzt. Verwenden Sie Kommas, um mehrere Ausdrücke zu trennen // Hier filtern wir die Kameramarken heraus, die separat formatiert werden müssen var multiPromoted = $("li").filter(":contains('Canon'),:contains('Sony'),:contains('Kodak')");
      // Holen Sie sich das Klickereignis, das die Tag-Bindung eines Tags enthält $("div div a").click(function () {
        // Zwischen dem Anzeigen und Ausblenden einiger Kameramarken wechseln$("ul li:gt(5):not(:last)").toggle();
        // Ersetze Textinhalte, hochgestellte Bilder und entferne den Textstil des a-Tags unter li, wenn einige Kameramarken ausgeblendet werden, if ($("ul li:gt(5):not(:last)").is(":hidden")) {
          $("a > span").html("Alle Marken anzeigen");
          $("div div").removeClass();
          $("div div").addClass("mehr anzeigen");
          $(multiPromoted).removeClass("gefördert");
        } anders {
          // Ersetzen Sie beim Anzeigen einiger Kameramarken den Textinhalt und das hochgestellte Bild und fügen Sie den Textstil „a“ des Tags unter li$("a > span").html("Vereinfachte Marken anzeigen"); hinzu.
          $("div div").removeClass();
          $("div div").addClass("ohne Anzeige");
          $(multiPromoted).addClass("gefördert");
        }
      });
    });
  </Skript>
</Kopf>
<Text>
<div Klasse="UnterkategorieBox">
  <ul>
    <li><a href="#">Canon</a><i>(30440) </i></li>
    <li><a href="#">Sony</a><i>(27220) </i></li>
    <li><a href="#">Samsung</a><i>(20808) </i></li>
    <li><a href="#">Nikon</a><i>(17821) </i></li>
    <li><a href="#">Panasonic</a><i>(12289) </i></li>
    <li><a href="#">Casio</a><i>(8242) </i></li>
    <li><a href="#">Fuji</a><i>(14894) </i></li>
    <li><a href="#">Kodak</a><i>(9520) </i></li>
    <li><a href="#">Pentax</a><i>(2195) </i></li>
    <li><a href="#">Ricoh</a><i>(4114) </i></li>
    <li><a href="#">Olympus</a><i>(12205) </i></li>
    <li><a href="#">BenQ</a><i>(1466) </i></li>
    <li><a href="#">Patriot</a><i>(3091) </i></li>
    <li><a href="#">Kameras anderer Marken</a><i>(7275) </i></li>

  </ul>
  <div Klasse="mehr anzeigen">
    <a href="#"><span>Alle Marken anzeigen</span></a>
  </div>
</div>
</body>
</html>

Effekt der Codeausführung:

Funktionsanzeigeeffekt:

Dies ist das Ende dieses Artikels darüber, wie jQuery die Funktionen hide() und toggle() verwendet, um Kameramarken anzuzeigen und auszublenden. Weitere Informationen darüber, wie jQuery die Funktionen hide() und toggle() verwendet, um Kameramarken anzuzeigen und auszublenden, finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

Das könnte Sie auch interessieren:
  • Beispiel zur Erklärung der Verwendung von Ausblenden, Anzeigen und Umschalten in JQuery
  • jQuery-Umschaltalternative
  • jQuery-Klick zum Ändern der Klasse und Umschalten sowie Definition und Verwendung der Methode „toggleClass()“
  • jQuery verwendet die ToggleClass-Methode zum dynamischen Hinzufügen und Löschen von Klassenstilen
  • Eine Anleitung zur Verwendung der Hover- und Toggle-Methoden in jQuery
  • Beispiele für die Verwendung von show(), hide() und toggle() in jQuery

<<:  Eine vollständige Aufzeichnung eines Mysql-Deadlock-Fehlerbehebungsprozesses

>>:  So erstellen und führen Sie ein Django-Projekt in Ubuntu 16.04 unter Python 3 aus

Artikel empfehlen

Kennen Sie die häufigsten MySQL-Designfehler?

Dank der Entwicklung des Internets können wir die...

Verschiedene Möglichkeiten zum Ändern der Hintergrundbildfarbe mit CSS3

CSS3 kann die Farbe von Bildern ändern. Ab sofort...

Verwenden Sie nginx, um Bildgrößen dynamisch zu konvertieren und Miniaturansichten zu generieren

Mit dem Nginx-Modul ngx_http_image_filter_module ...

Verwendung und Unterschied von Vue.set() und this.$set()

Wenn wir Vue zur Entwicklung verwenden, kann eine...

So verwenden Sie den Linux-Befehl „basename“

01. Befehlsübersicht Basisname - entfernt Verzeic...

Eclipse konfiguriert Tomcat und Tomcat hat eine ungültige Port-Lösung

Inhaltsverzeichnis 1. Eclipse konfiguriert Tomcat...

HTML+CSS zum Erstellen eines einfachen Fortschrittsbalkens

1. HTML-Code Code kopieren Der Code lautet wie fo...

So verwenden Sie den Linux-Befehl nl

1. Befehlseinführung nl (Anzahl der Zeilen) fügt ...

Mysql implementiert Master-Slave-Konfiguration und Multi-Master-Multi-Slave-Konfiguration

Was wir jetzt simulieren, ist ein Master-Slave-Sy...

Detailliertes Tutorial zur Installation von MySQL 5.7.18 unter Linux (CentOS 7) mit YUM

Das Projekt muss MySQL verwenden. Da ich es zuvor...

Detaillierte Erklärung zur Verwendung der React-Listenleiste und der Warenkorbkomponenten

In diesem Artikelbeispiel wird der spezifische Co...

Das Vue-Projekt implementiert eine Fortschrittsbalkenfunktion für den Dateidownload

Im täglichen Geschäftsleben gibt es zwei gängige ...

Grundlegende Struktur von HTML-Dokumenten (Grundkenntnisse zur Erstellung von Webseiten)

HTML-Funktionsprinzip: 1. Lokaler Vorgang: Öffnen...

Zusammenfassung relevanter Erkenntnisse zur Umsetzung adaptiven Webdesigns

Wie funktioniert „Adaptives Webdesign“? Eigentlich...

Detaillierte Erklärung der Rahmen- und Regelattribute der Tabelle in HTML

Die Rahmen- und Regelattribute des Tabellentags k...