Esiste un modo per gestire gli eventi clic nei CSS senza utilizzare JavaScript. Puoi utilizzare il metodo con :bersaglio. Ma cosa succede se non può essere utilizzato? C'è un altro metodo.

Guarda la dimostrazione. È completamente realizzato in CSS, non una riga di codice JavaScript. Si basa sull'uso originale dei selettori:active e:hover.

Descrizione

Per prima cosa devi creare un contenitore che conterrà un pulsante e dei blocchi che verranno visualizzati quando si preme il mouse. La struttura del markup sarà qualcosa del genere:

Lorem ipsum dolor sit amet.

Consectetur adipiscing elit.

Pulsante

Dobbiamo rendere .content invisibile finché non viene premuto il pulsante del mouse su .wrapper . Per risolvere il problema, imposta la proprietà .content display: none . Quindi, quando si preme il pulsante del mouse su .wrapper, includeremo la proprietà display: block per .content. Perché impostare la visualizzazione della proprietà .wrapper:active .content: block . In questo stato, .content sarà visibile solo quando si preme il pulsante del mouse. Se lo rilasci, .content scomparirà di nuovo. Per risolvere questo problema, assicuriamoci che quando il cursore del mouse si trova su .content , all'elemento viene assegnata la proprietà display: block. Cioè, impostiamo la proprietà display: block per .content:hover. Il codice CSS sarà simile a:

Contenuto ( display: none; ) .wrapper:active .content ( display: blocco; ) .content:hover ( display: blocco; )

Non resta che “pettinarlo” aspetto e renderlo più chiaro:

Wrapper ( posizione: relativa; ) .pulsante ( sfondo: giallo; altezza: 20px; larghezza: 150px; ) .content ( posizione: assoluta; riempimento-top: 20px; ) .content li ( sfondo: rosso; )

Il testo del pulsante nel codice precedente avrà uno sfondo giallo e le informazioni visualizzate quando si preme il pulsante del mouse avranno uno sfondo rosso.

Uno spoiler è un blocco di informazioni inizialmente nascosto agli utenti e visualizzato solo quando l'utente fa clic su un determinato pulsante. Sul mio sito, sotto forma di spoiler, ci sono le REGOLE per aggiungere commenti. Se clicchi sulla parola REGOLE, che risulta evidenziata, sotto si aprirà un blocco con le regole.

Come ho scritto sopra, mostrerò diversi metodi che sono essenzialmente simili, ma utilizzano script diversi ed eseguono animazioni diverse. Di seguito sono riportati degli esempi.

Diamo un'occhiata a ciascuno dei metodi in ordine in modo che tu possa applicarne uno sul tuo sito web. Ma prima di farlo, definiamo la libreria jquery. Se lo hai già collegato, inizia a guardare i metodi, in caso contrario collegalo nell'intestazione o nel piè di pagina;

Ora andiamo con ordine.

Metodo n. 1

Infatti, il più semplice dei metodi, quando si clicca, appare immediatamente il blocco. Se premuto nuovamente scompare immediatamente. È semplice. Questo metodo Lo uso anch'io.

Aggiungi uno script molto semplice. Puoi aggiungerlo direttamente nel punto in cui desideri visualizzare il blocco, puoi collegarlo nell'intestazione o nel piè di pagina, oppure puoi inserirlo in un file, che potrai poi connettere al sito, di nuovo, ovunque.

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

Lo script funziona con un blocco a cui è assegnata la classe spoiler-body e lo mostra quando si fa clic su un pulsante, blocco o collegamento, in generale, tutto ciò a cui è assegnata la classe spoiler-title. Per visualizzare un blocco, lo script utilizza il metodo toggle.

Spoiler Mostra/nascondi il testo nascosto che appare al passaggio del mouse

Il pulsante che si aprirà sarà il testo all'interno del tag b, come ho detto, puoi utilizzare qualsiasi tag.

Bene, assegniamo stili minimi. Il parametro principale è display:none per il blocco, che verrà nascosto. Questo è un must, altrimenti non funzionerà.

Titolo-spoiler(cursore:puntatore;).corpo-spoiler(display:none;sfondo:#f1f1f1;)

Non serve altro, tutto dovrebbe funzionare. C'è un altro punto. Puoi rendere questa animazione un po' più fluida. Per fare ciò, aggiungi un valore in millisecondi tra parentesi dopo il metodo di commutazione.
Ad esempio: toggle(500) . Ora il blocco non si aprirà immediatamente, ma in mezzo secondo 0,5. Il blocco di apertura apparirà diagonalmente da in alto a sinistra a in basso a destra. Puoi vederlo nell'esempio sopra.

Metodo n. 2

Per questo metodo e per tutti gli altri verranno utilizzati gli stessi blocchi e classi, quindi non riscriverò tutto. Solo la sceneggiatura stessa sarà diversa.

Questo metodo apre senza problemi il blocco e appare dall'alto verso il basso. Per apparire, lo script utilizza il metodo slideToggle.

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

Qui, come nella prima opzione, puoi modificare il tempo dell'animazione. Per impostazione predefinita il suo valore è 400 millisecondi. Se vuoi accelerare o rallentare, aggiungi un valore tra parentesi.
Ad esempio: slideToggle(600) .

Metodo n. 3

Questo metodo è essenzialmente uguale al secondo, stessa animazione, ma ne ha una caratteristica interessante. Il pulsante premuto per aprire il blocco cambia. Nell'esempio che hai visto è solo testo - Mostra testo che, all'apertura del blocco, si trasforma in Nascondi testo.
Se aggiungi un po' di fantasia, puoi aggiungere un'immagine o un blocco al posto del testo, che puoi decorare con stili. In questo metodo viene utilizzata la seguente funzione.

$(document).ready(function())( $(".spoiler-body").hide(); $(".spoiler-title").click(function())( $(this).toggleClass( "aperto ").toggleClass("chiuso").next().slideToggle(); if($(this).hasClass("aperto")) ( $(this).html("Nascondi testo"); ) else ( $ (questo).html("Mostra testo");

Puoi modificare il tempo dell'animazione utilizzando lo stesso metodo del secondo metodo.

Fondamentalmente è tutto, questi sono i tre metodi principali che volevo mostrare. Quale è giusto per te spetta a te decidere. Ora puoi organizzare facilmente un blocco che appare dopo aver premuto un pulsante.

Utilizzi spoiler sul tuo sito web e perché?

Questo è tutto, grazie per l'attenzione. 🙂

Oggi ti parleremo di come nascondere un elemento facendo clic su di esso. Oppure fai clic per mostrarlo. Oppure al primo clic nascondi e al secondo clic mostra. In generale, penso che tu capisca di cosa sto parlando. Qualcosa di simile è stato descritto in questo articolo.

Ma oggi tutto sarà diverso. L'effetto sarà lo stesso, ma scomparirà rapidamente, istantaneamente e non in modo fluido. Per fare ciò, creiamo lo stesso markup:

< div class = "block" > < h1 class = "extremum-click" >Teiere< div class = "extremum-slide" >Questa storia parla di come una volta andai nella foresta per raccogliere funghi e trovai una teiera magica.

Ora scriviamo gli stili. Per impostazione predefinita, il blocco di testo è nascosto. Aggiungiamo alcuni effetti visivi e, cosa più importante, miglioriamo leggermente la sceneggiatura. Cliccando sul titolo lo evidenzieremo con il colore. Ecco gli stili:

.extremum-slide (bordo: 1px solido; imbottitura: 50px; display: nessuno;) .red (colore sfondo: rosso;)

Ora la sceneggiatura stessa, che darà vita a tutto questo:

$(documento) .ready (funzione () ( $(".block") .on ("clic" , ".extremum-click" , funzione () ( $(questo ) .toggleClass ("rosso" ) .siblings ( ".extremum-slide" ) .slideToggle (0 ) ) ;

Questo è tutto: puoi goderti il ​​risultato. Non c'è niente di particolare da dire: clicchiamo sul titolo.extremum-click, viene mostrato il testo.extremum-slide e contemporaneamente viene evidenziato lo stesso titolo. La prossima volta che fai clic sul titolo, il blocco di testo scompare.

Codice di tutta la pagina:

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

Teiere Teiere Questa storia racconta di come una volta andai nella foresta per raccogliere funghi e trovai una teiera magica. Teiere Questa storia racconta di come una volta andai nella foresta per raccogliere funghi e trovai una teiera magica. Spesso nei nostri progetti abbiamo la necessità di associare un'azione specifica ad un'azione dell'utente. Ad esempio, quando fai clic con il pulsante sinistro del mouse su un determinato div (blocco), il colore di questo blocco cambia. In generale, premere il pulsante sinistro del mouse si chiama clic. Per elaborare questo evento si utilizzano principalmente javascript e jquery, ma è possibile anche con

utilizzando i CSS

fare clic su traccia. Questo è ciò di cui parleremo in questo post. Naturalmente sorge una domanda legittima: perché tracciare utilizzando i clic CSS, tutto funziona bene utilizzando JavaScript. Ma se js è disabilitato nel browser dell'utente, la funzionalità del sito non sarà completa e fare clic su css funzionerà sempre. Esistono diversi metodi per gestire l'evento clic CSS. Il primo è "controllato"

metodo "controllato".

Per prima cosa, scriviamo del codice html e css.

cliccami

Se lo sfondo è rosso la casella di controllo è selezionata

Diamo un'occhiata al codice. Abbiamo tre blocchi.box, .noncheck1, .check. Sono tutti posizionati l'uno rispetto all'altro in modo che il blocco .check sia sotto .noncheck1. Non ho inserito il CSS dei pulsanti nell'elenco perché non è importante. E ora iniziamo a capire il metodo “controllato”. Il metodo si basa sull'uso dell'elemento checkbox e del suo attributo checked. Facciamo clic sulla casella di controllo e il suo stato diventa selezionato. Associamo una modifica a questo evento utilizzando i selettori css “~” o “+”. Ad esempio, modificando il testo o il colore dello sfondo di un determinato elemento. Nell'esempio selezioniamo la casella di controllo e in div.box div.noncheck1 diventa invisibile (display: none), possiamo vedere div.check. Per progettare il cambio di stato in background come un pulsante, assegniamo un'etichetta alla nostra casella di controllo e creiamo un pulsante da essa. Ora non abbiamo bisogno della casella di controllo (abbiamo un pulsante) e la nascondiamo (display: none)

Metodo "target" On Off .noncheck2:target( display: none; )

Il metodo target funziona su questo principio. Creiamo un button.butt2 con il collegamento On. Nel collegamento assegniamo il tag hash "#On". Quando fai clic su un collegamento sotto forma di pulsante con un hashtag, vai al div con id="On". Questo div colpisce il bersaglio. La pseudo-classe target viene attivata. Abbiamo nascosto div.noncheck2 per questo evento anche perché display: none. Quando fai clic su un altro pulsante di collegamento, il div lascia il target, mentre il target si sposta su un altro blocco. Div.noncheck2 appare di nuovo.

Metodo "tabindex" On Off .butt4:focus ~.box .noncheck3 ( display: none; )

Questo metodo si basa sull'utilizzo dell'attributo tabindex. Sta nel fatto che possiamo impostare il focus di input su alcuni elementi della pagina web utilizzando tabindex. L'elemento riceve un evento focus (.butt4:focus) che può essere gestito utilizzando CSS. Usiamo il selettore dei vicini "~" per assegnare lo stato display: none all'elemento .noncheck3 quando si verifica l'evento .butt4:focus. Quando il nostro focus si sposta da un pulsante a un altro elemento della pagina, noncheck3 ritorna al suo stato originale.