Astăzi voi arăta punerea în aplicare a spoilerul pe jquery - foarte simplu, astfel încât să puteți repeta totul în doar câteva minute.
Buna ziua. Pentru a nu în mod constant Google, cum să faci pe spoiler Jquery, am decis să scriu singur un articol cu o singură dată. În plus, unele dintre variantele pe care le-am găsit sunt prea greoaie, vă voi oferi o versiune foarte compactă, în câteva rânduri. În consecință, și o puteți realiza incredibil de simplu și rapid.
Ce este necesar?
Numai biblioteca jquery de care aveți nevoie pentru a vă conecta la site. Dacă aveți un site pe WordPress, atunci am scris despre caracteristicile de conectare aici.
Punem în aplicare un spoiler
Totul va fi la fel de simplu ca 2 degete pe asfalt. Vom presupune că ați deja conectat jquery, atunci, în cazul în care trebuie să eliminați spoilerul, vom introduce următorul cod:
Firește, textul butonului și conținutul însuși sunt editate pentru dvs. Puteți adăuga clasele dvs. suplimentare de css la orice elemente suplimentare. stilizare. Acum voi adăuga acest cod în stil.css:
Mai întâi, ea stiliză butonul. În al doilea rând, spoilerul însuși va fi eliminat din pagină. Butonul arată astfel:
Sub ea, după cum puteți vedea, nu este nimic. Acum, cel mai important lucru este că vom face un spoiler deschis la apăsarea unui buton și vom închide cu un clic invers. Așa este, pentru că o persoană ar putea dori să închidă spoilerul și dacă nu îl lași să facă, poate fi foarte supărat.
Deci, toată magia face acest cod (dacă lipiți direct în html, atunci așa):
Dacă doriți să inserați codul în fișierul dvs. js, atunci, desigur, eliminați etichetele de script la începutul și la sfârșit.
Este foarte important ca scriptul sau fișierul script să se conecteze mai târziu la site-ul jquery. Dacă acest lucru nu este făcut, atunci nimic nu va funcționa! Biblioteca jquery trebuie să se încarce înainte de scenariu.
Deci am făcut:
Adică, după cum puteți vedea, este mai întâi conectat la bibliotecă, iar scriptul însuși funcționează deja.
Verificați rezultatul
Iată ce sa întâmplat:
Când faceți clic pe buton, conținutul apare fără probleme. Când faceți clic din nou, dispare fără probleme. Așa e, prieteni. A fost o opțiune de a implementa un spoiler simplu jquery.
Apropo, nu folosesc această opțiune, dar numai pentru motivul că am pus o temă adaptivă Root pe toate site-urile wordpress. Este inteligent și în interior există deja spoilere, de ce să adaug codul meu suplimentar?
Interesant de lumea construirii site-urilor
V-ați abonat. Mulțumesc.
Articole similare
Trimiteți-le prietenilor: