Hvordan lage en utvidbar og avtalbar FAQ i jQuery

Fortsetter jeg i vår tutorial-serie med å introdusere jQuery-funksjoner og -funksjoner, vil jeg demonstrere hvordan du oppretter et utvidende og kontraherende FAQ-dokument ved å bruke funksjonen toggle .toggle () i jQuery.

Hvis du har gått glipp av de fire første delene av jQuery-serien, må du huske å sjekke dem nedenfor, da de legger grunnlaget for fortsettelsen av trinnene vi vil ta i dette segmentet:

  • Opplæring: jQuery Show, Hide and Toggle-funksjoner
  • Slik bruker du filterfunksjoner i jQuery
  • jQuery: Hvordan få objekter etter ID, klasse, tagg og attributt
  • Slik kommer du i gang med jQuery

Demonstrasjonene, inkludert filen index.html, er alle inneholdt i nedlastingen, så du kan følge med i trinnene nedenfor for å lage dine egne oppdateringer når vi fortsetter.

Lag en utvidbar og avtalbar FAQ

Kraften til jQuery vil bli utnyttet for å lage en fin FAQ med spørsmål som alltid viser, men svarene kan utvides ved klikk og kan også avtales. I tillegg vil vi legge til en funksjon for å utvide alle svar og inngå alle svar, siden svarene er som standard på siden last, er skjult. Denne funksjonen gir besøkende muligheten til å se svar på spørsmål som bare gjelder henvendelsen, og hjelper deg med å rydde opp i spesielt lange FAQ-seksjoner.

Vi vil begynne med å legge til en definisjonsliste i kroppen til indeksen vår.html (ligger i nedlastingen) og begynne med å legge til i FAQ-delen vår på linje 13 som vist nedenfor. Dette er en semantisk form for å vise spørsmålene og svarene; Selv om jQuery ikke krever det, har vi spørsmålene i definisjonen tagger, og svarene i definisjonsbeskrivelsen

tags.

ofte stilte spørsmål

 FAQ - Avsnitt 1 
 Spørsmål 1 
Dette er svaret på det første spørsmålet.
 Spørsmål 2 
Dette er svaret på det andre spørsmålet.
 FAQ - Avsnitt 2 
 Spørsmål 1 
Dette er svaret på det første spørsmålet.
 Spørsmål 2 
Dette er svaret på det andre spørsmålet.

Se FAQ-delen i nettleseren din; nedenfor ser det ut i Chrome 18.0.1:

Figur A

Deretter vil vi legge til følgende. Skjul () -funksjon i dokumentklar funksjon for å skjule alle definisjonsbeskrivelser som vist nedenfor. Denne ene samtalen vil skjule alle

koder i dokumentet, slik at de forsvinner når dokumentet er klart. Plassere følgende kodelinje i dokumentklar-funksjonen:

 $ ( "Dd") skjule (.); 

Nå er alle svarene våre skjult. Se nå index.html-dokumentet i nettleseren din og oppdater siden, bare definisjonsoverskriftene og spørsmålene vises som vist i Chrome 18.0.1:

Figur B

Deretter vil vi gjøre spørsmålene klikkbare, som lar brukerne se svarene når de klikker på et spørsmål. For å gjøre dette, må vi legge til .klikken (funksjonen) til koder, og vi vil også ringe til noen CSS også. Vi vil da ta tak i hver tag ved å bruke $ (denne) .next () -funksjonen sammen med en .toggle () -funksjon til vår jQuery dokumentklare funksjon. Legg til følgende jQuery til dokumentklar funksjon:

 $ ("dt") .addClass ('spørsmål') .click (funksjon () { 
 $ (Denne) .next () toggle ().; 
 }); 

Den virkelige kraften til jQuery er gearingen du får med den andre linjen med koden oppført ovenfor (jeg vil forklare hvorfor bare litt lenger). La oss først legge til stylingen som kalles fra .addClass ('spørsmål').

Denne CSS-stylingen er lagt til filen styles.css:

 .spørsmål { 
 markør: peker; 
 farge: # 696; 
 font-vekt: bold; 
 } 

Når dokumentet er klart, ringer jQuery pekeren cursr og angir tagger til en farge # 696, og en skriftvekt med fet skrift, legger også inn en klikkfunksjon og bruker det samme på alle påfølgende søsken koder i dokumentet. Så ved å klikke, synligheten til

taggen er koblet til å vises, klikk igjen, og vipperen har
koden forsvinner.

Du lurer kanskje på hvordan

koder refereres til? Husk at jeg nevnte ovenfor den ene importlinjen med kode. Vi satte opprinnelig alle
tagger til skjult, og for objektet koder, refererer vi dem til med $ (denne) funksjonen. Deretter kaller vi funksjonen .neste () på det klikkede objektet for å returnere objektet som umiddelbart kommer etter det i HTML, og til slutt har vi .toggle () som lar oss veksle synligheten fra skjult til å vises.

Oppdater index.html-filen og lek deg rundt ved å klikke på et spørsmål. Dette er våre vanlige spørsmål som vist i Chrome 18.0.1:

Figur C

Dette er de vanlige spørsmålene som vises etter at det første spørsmålet er klikket:

Figur D

Utvidelsesplaner

Hvis du vil tillate besøkende å utvide alle svarene på en gang for vanlige spørsmål, er det en enkel redigering. Alt vi trenger å gjøre er å legge til en lenke for å klikke, som viser alle svarene. Vi bruker .toggle () og .show () -funksjonen igjen til

tags.

Legg til denne jQuery til dokumentklar funksjon og plasser den over

. skjul () funksjon:

 $ (". FAQ"). Prepend ('Utvid alle vanlige svar'); 
 Deretter legger du til denne koden nederst i dokumentklar-funksjonen: 
 $ ("# show"). klikk (funksjon () { 
 $ ( "Dd") viser (.); 
 }); 
Oppdater index.html-filen i nettleseren din, og klikk deretter på lenken "Utvid alle vanlige svar"; resultatet vises i figur E nedenfor:

Figur E

Vil du at brukerne skal ha muligheten til å utvide (vise) og trekke sammen (skjule) alle svarene med bare ett klikk? Enkelt - vi vil oppdatere en oppføring og bruke den samme lenken, men i stedet for å ringe $ ("dd"). Show (); vi vil erstatte det med denne linjen:

 $ ( "Dd") toggle ().; 

Oppdater deretter lenken til dette:

 $ (". FAQ"). Prepend ('Vis / skjul alle vanlige svar'); 

Oppdater nå index.html-siden, og det første klikket på lenken "Vis / skjul alle vanlige svar" vil gjøre dem alle synlige. Klikk på den samme lenken igjen, så vil den få dem til å forsvinne.

Du kan også legge til en separat utvid- og avtaleknapper, eller navngi dem "Vis alle" og "skjul alle". For å gjøre det, vil vi legge til følgende knapper i FAQ-delen:

Deretter vil vi legge til følgende jQuery i dokumentklar-funksjonen nederst:

 $ ("# show_dd"). klikk (funksjon () { 
 $ ( "Dd") viser (.); 
 }); 
 $ ("# hide_dd"). klikk (funksjon () { 
 $ ( "Dd") skjule (.); 
 }); 

Oppdater index.html-dokumentet, og følgende vises som vist i Chrome 18.0.1:

Figur F

Klikk på Vis alle-knappen, og resultatet er det samme som koblingen "Utvid alle vanlige spørsmål" vist i figur E. Klikk på Skjul alle-knappen, og svarene forsvinner.

© Copyright 2021 | pepebotifarra.com