Gibt es eine Möglichkeit, Klickereignisse in CSS zu verarbeiten, ohne JavaScript zu verwenden? Sie können die Methode mit verwenden :Ziel. Was aber, wenn es nicht genutzt werden kann? Es gibt eine andere Methode.

Sehen Sie sich die Demo an. Es ist vollständig in CSS erstellt und nicht nur eine Zeile JavaScript-Code. Es basiert auf der ursprünglichen Verwendung der Selektoren:active und:hover.

Beschreibung

Zuerst müssen Sie einen Container erstellen, der eine Schaltfläche und Blöcke enthält, die angezeigt werden, wenn die Maus gedrückt wird. Die Markup-Struktur sieht etwa so aus:

Lorem ipsum dolor sit amet.

Consectetur adipiscing elit.

Taste

Wir müssen .content unsichtbar machen, bis die Maustaste auf .wrapper gedrückt wird. Um das Problem zu lösen, legen Sie die .content-Eigenschaft display: none fest. Wenn dann die Maustaste auf .wrapper gedrückt wird, fügen wir die display:block-Eigenschaft für .content ein. Warum die .wrapper:active .content-Eigenschaft display: block festlegen? In diesem Zustand ist .content nur sichtbar, wenn die Maustaste gedrückt wird. Wenn Sie es freigeben, verschwindet .content wieder. Um dies zu beheben, stellen wir sicher, dass dem Element die Eigenschaft display:block zugewiesen wird, wenn sich der Mauszeiger über .content befindet. Das heißt, wir legen die display:block-Eigenschaft für .content:hover fest. Der CSS-Code sieht folgendermaßen aus:

Inhalt ( display: none; ) .wrapper:active .content ( display: block; ) .content:hover ( display: block; )

Es bleibt nur noch „durchkämmen“ Aussehen und um es klarer zu machen:

Wrapper (Position: relativ;) .button (Hintergrund: gelb; Höhe: 20px; Breite: 150px;) .content (Position: absolut; padding-top: 20px;) .content li (Hintergrund: rot;)

Der Schaltflächentext im obigen Code hat einen gelben Hintergrund und die beim Drücken der Maustaste angezeigten Informationen haben einen roten Hintergrund.

Ein Spoiler ist ein Informationsblock, der den Benutzern zunächst verborgen bleibt und erst erscheint, wenn der Benutzer auf eine bestimmte Schaltfläche klickt. Auf meiner Website gibt es in Form eines Spoilers REGELN für das Hinzufügen von Kommentaren. Wenn Sie auf das hervorgehobene Wort REGELN klicken, öffnet sich unten ein Block mit Regeln.

Wie ich oben geschrieben habe, werde ich mehrere Methoden zeigen, die im Wesentlichen ähnlich sind, aber unterschiedliche Skripte verwenden und unterschiedliche Animationen ausführen. Nachfolgend finden Sie Beispiele.

Schauen wir uns die einzelnen Methoden der Reihe nach an, damit Sie eine davon auf Ihrer Website anwenden können. Aber bevor wir das tun, definieren wir die JQuery-Bibliothek. Wenn Sie es schon einmal verbunden haben, schauen Sie sich die Methoden an. Wenn nicht, dann verbinden Sie es in der Kopf- oder Fußzeile.

Gehen wir nun der Reihe nach vor.

Methode Nr. 1

Bei der einfachsten Methode wird der Block beim Klicken sofort angezeigt. Bei erneutem Drücken verschwindet es sofort. Es ist einfach. Diese Methode Ich benutze es auch.

Fügen Sie ein sehr einfaches Skript hinzu. Sie können es direkt an der Stelle hinzufügen, an der Sie den Block anzeigen möchten, Sie können es in der Kopf- oder Fußzeile verbinden oder Sie können es in eine Datei einfügen, die Sie dann überall wieder mit der Site verbinden können.

$(document).ready(function())( $(".spoiler-body").hide(); $(".spoiler-title").click(function())( $(this).next( ). toggle()));

Das Skript arbeitet mit einem Block, dem die Klasse „Spoiler-Body“ zugewiesen ist, und zeigt ihn an, wenn auf eine Schaltfläche, einen Block oder einen Link geklickt wird, im Allgemeinen alles, dem die Klasse „Spoiler-Titel“ zugewiesen ist. Um einen Block anzuzeigen, verwendet das Skript die Toggle-Methode.

Spoiler Ein-/Ausblenden von verstecktem Text, der beim Hover angezeigt wird

Die Schaltfläche, die sich öffnet, ist der Text im b-Tag. Wie gesagt, Sie können jedes beliebige Tag verwenden.

Nun, lassen Sie uns minimale Stile zuweisen. Der Hauptparameter ist display:none für den Block, der ausgeblendet wird. Das ist ein Muss, sonst funktioniert es nicht.

Spoiler-title(cursor:pointer;).spoiler-body(display:none;background:#f1f1f1;)

Mehr ist nicht nötig, alles sollte funktionieren. Es gibt noch einen weiteren Punkt. Sie können diese Animation etwas flüssiger gestalten. Fügen Sie dazu nach der Toggle-Methode einen Wert in Millisekunden in Klammern ein.
Zum Beispiel: toggle(500) . Jetzt öffnet sich der Block nicht sofort, sondern in einer halben Sekunde 0,5. Der Eröffnungsblock erscheint diagonal von links oben nach rechts unten. Sie können dies im obigen Beispiel sehen.

Methode Nr. 2

Für diese Methode und für alle anderen werden die gleichen Blöcke und Klassen verwendet, daher werde ich nicht alles noch einmal aufschreiben. Nur das Skript selbst wird anders sein.

Diese Methode öffnet den Block reibungslos und erscheint von oben nach unten. Zum Erscheinen verwendet das Skript die slideToggle-Methode.

$(document).ready(function())( $(".spoiler-title").click(function())( $(this).parent().children(".spoiler-body").slideToggle( ); return false; ));

Hier können Sie wie bei der ersten Option die Animationszeit ändern. Standardmäßig beträgt der Wert 400 Millisekunden. Wenn Sie beschleunigen oder verlangsamen möchten, fügen Sie einen Wert in Klammern hinzu.
Zum Beispiel: slideToggle(600) .

Methode Nr. 3

Diese Methode ist im Wesentlichen dieselbe wie die zweite, dieselbe Animation, hat aber eine interessante Funktion. Die Schaltfläche, die zum Öffnen des Blocks gedrückt wurde, ändert sich. In dem Beispiel, das Sie gesehen haben, ist es nur Text – Text anzeigen, der sich beim Öffnen des Blocks in Text ausblenden ändert.
Wenn Sie etwas Fantasie hinzufügen, können Sie anstelle von Text ein Bild oder einen Block hinzufügen, den Sie mit Stilen dekorieren können. Die folgende Funktion wird in dieser Methode verwendet.

$(document).ready(function())( $(".spoiler-body").hide(); $(".spoiler-title").click(function())( $(this).toggleClass( "opened ").toggleClass("closed").next().slideToggle(); if($(this).hasClass("opened")) ( $(this).html("Hide text"); ) else ( $ (this).html("Text anzeigen");

Sie können die Animationszeit mit der gleichen Methode wie bei der zweiten Methode ändern.

Das ist im Grunde alles, das sind die drei Hauptmethoden, die ich zeigen wollte. Welches für Sie das Richtige ist, liegt bei Ihnen. Jetzt können Sie ganz einfach einen Block organisieren, der erscheint, nachdem Sie eine Taste gedrückt haben.

Benutzen Sie Spoiler auf Ihrer Website und warum?

Das ist alles, vielen Dank für Ihre Aufmerksamkeit. 🙂

Heute sprechen wir mit Ihnen darüber, wie Sie ein Element ausblenden können, indem Sie darauf klicken. Oder klicken Sie, um es anzuzeigen. Oder beim ersten Klick – Ausblenden und beim zweiten Klick – Anzeigen. Im Allgemeinen denke ich, dass Sie verstehen, wovon ich spreche. Ähnliches wurde in diesem Artikel beschrieben.

Doch heute wird alles anders sein. Der Effekt wird derselbe sein, aber er verschwindet schnell, sofort und nicht reibungslos. Dazu erstellen wir dasselbe Markup:

< div class = "block" > < h1 class = "extremum-click" >Teekannen< div class = "extremum-slide" >In dieser Geschichte geht es darum, wie ich einmal in den Wald ging, um Pilze zu sammeln, und eine magische Teekanne fand.

Schreiben wir nun die Stile. Standardmäßig ist der Textblock ausgeblendet. Fügen wir einige visuelle Effekte hinzu und, was am wichtigsten ist, wir werden das Skript leicht verbessern. Durch Klicken auf den Titel heben wir ihn farblich hervor. Hier sind die Stile:

.extremum-slide (Rahmen: 1 Pixel durchgehend; Polsterung: 50 Pixel; Anzeige: keine;) .red (Hintergrundfarbe: rot;)

Nun das Drehbuch selbst, das das Ganze zum Leben erwecken wird:

$(document) .ready (function () ( $(".block") .on ("click" , ".extremum-click" , function () ( $(this ) .toggleClass ("red" ) .siblings ( ".extremum-slide" ) .slideToggle (0 ) );

Das ist alles – Sie können das Ergebnis genießen. Es gibt nichts Besonderes zu sagen: Wir klicken auf den Titel.extremum-klicken, der Text.extremum-slide wird angezeigt und gleichzeitig wird der gleiche Titel hervorgehoben. Beim nächsten Klick auf den Titel verschwindet der Textblock.

Alle Seitencode:

.extremum-slide ( border:1px solid; padding:50px; display:none; ) .red ( background-color:red; ) $(document).ready(function() ( $(".block").on( "click", ".extremum-click", function() ( $(this).toggleClass("red").siblings(".extremum-slide").slideToggle(0); ));

Teekannen Teekannen In dieser Geschichte geht es darum, wie ich einmal in den Wald ging, um Pilze zu sammeln, und eine magische Teekanne fand. Teekannen In dieser Geschichte geht es darum, wie ich einmal in den Wald ging, um Pilze zu sammeln, und eine magische Teekanne fand. In unseren Projekten müssen wir häufig eine bestimmte Aktion an eine Benutzeraktion binden. Wenn Sie beispielsweise mit der linken Maustaste auf ein bestimmtes Div (Block) klicken, ändert sich die Farbe dieses Blocks. Im Allgemeinen wird das Drücken der linken Maustaste als Klicken bezeichnet. Zur Verarbeitung dieses Ereignisses werden hauptsächlich Javascript und JQuery verwendet, es ist aber auch mit möglich

mit CSS

Klicken Sie auf Spur. Darüber werden wir in diesem Beitrag sprechen. Natürlich stellt sich die berechtigte Frage: Warum mit CSS verfolgen, klicken, mit Javascript funktioniert alles einwandfrei. Wenn js jedoch im Browser des Benutzers deaktiviert ist, ist die Funktionalität der Website nicht vollständig und das Klicken auf CSS funktioniert immer. Es gibt verschiedene Methoden, um das CSS-Klickereignis zu verarbeiten. Der erste ist „geprüft“

„geprüfte“ Methode

Schreiben wir zunächst etwas HTML- und CSS-Code.

klick mich

Wenn der Hintergrund rot ist, ist das Kontrollkästchen aktiviert

Schauen wir uns den Code an. Wir haben drei Blöcke.box, .noncheck1, .check. Sie sind alle relativ zueinander positioniert, sodass der .check-Block unter .noncheck1 liegt. Ich habe das CSS der Schaltflächen nicht in die Auflistung aufgenommen, da es nicht wichtig ist. Und jetzt beginnen wir, die „geprüfte“ Methode zu verstehen. Die Methode basiert auf der Verwendung des Checkbox-Elements und seines aktivierten Attributs. Wir klicken auf das Kontrollkästchen und sein Status ändert sich in „aktiviert“. Wir binden eine Änderung an dieses Ereignis mithilfe der CSS-Selektoren „~“ oder „+“. Ändern Sie beispielsweise den Text oder die Hintergrundfarbe eines bestimmten Elements. Im Beispiel aktivieren wir das Kontrollkästchen und in der div.box wird div.noncheck1 unsichtbar (Anzeige: keine), wir können div.check sehen. Um den Hintergrund-Statusschalter als Button zu gestalten, weisen wir unserer Checkbox eine Beschriftung zu und erstellen daraus einen Button. Jetzt brauchen wir das Kontrollkästchen nicht (wir haben eine Schaltfläche) und blenden es aus (Anzeige: keine).

Methode „Ziel“ Ein Aus .noncheck2:target( display: none; )

Die Target-Methode funktioniert nach diesem Prinzip. Wir erstellen eine button.butt2 mit dem On-Link. Im Link vergeben wir den Hashtag „#On“. Wenn Sie auf einen Link in Form einer Schaltfläche mit einem Hashtag klicken, gelangen Sie zum Div mit id="On". Diese Div trifft ihr Ziel. Die Ziel-Pseudoklasse ist aktiviert. Wir haben div.noncheck2 für dieses Ereignis auch aufgrund von display: none ausgeblendet. Wenn Sie auf eine andere Link-Schaltfläche klicken, verlässt das Div das Ziel, während das Ziel zu einem anderen Block wechselt. Div.noncheck2 erscheint erneut.

Methode „tabindex“ Ein Aus .butt4:focus ~.box .noncheck3 ( display: none; )

Diese Methode basiert auf der Verwendung des tabindex-Attributs. Es liegt darin, dass wir mit tabindex den Eingabefokus auf einige Elemente der Webseite setzen können. Das Element erhält ein Fokusereignis (.butt4:focus), das mithilfe von CSS verarbeitet werden kann. Wir verwenden den Nachbarselektor „~“, um dem .noncheck3-Element den Status display: none zuzuweisen, wenn das Ereignis .butt4:focus auftritt. Wenn unser Fokus von einer Schaltfläche auf ein anderes Seitenelement wechselt, kehrt noncheck3 in seinen ursprünglichen Zustand zurück.