Creați un acordeon pentru site-ul, xozblog - lecții și articole de pe site-ul, blog-
- via jQuery;
- prin CSS3;
- folosind HTML5.
Dacă nu ați întâlnit un astfel de element de pe site-ul, atunci se va întâmpla mai devreme sau mai târziu. De fapt, un concept foarte simplu, care necesită puțin script-ul să funcționeze. Acordeoane, de obicei folosit pentru a furniza informații suplimentare. Puteți utiliza acordeon ca:
- meniu cu subparagrafele drop-down;
- răspunsuri la întrebările (pagina FAQ).
De fapt, multe aplicații pot fi găsite. Astfel, scopul acestui articol să ia în considerare trei moduri de a crea un acordeon. Să începem cu modul cel mai fidel, este adevărat, în sensul că acesta va funcționa în toate browserele.
Metoda 1: jQuery
stiluri de bază HTML și CSS marcare
rubrica 1
Aici este conținutul.
rubrica 2
Aici este conținutul.
rubrica 3
Aici este conținutul.
Aici este conținutul.
h2 # 123;
culoare. # 002850; font-size. 30px; font-greutate. normale;
umplutură. 45px 0 15px; cursor. pointer;
# 125;
.acordeon # 123;
de frontieră. 1pixel #ddd solid; border-top. nici unul; marjă. 0 10px;
float. stânga; lățime. 470px; poziție. relativă;
# 125;
.acordeon un # 123;
afișare. bloc; text-decor. nici unul;
# 125;
.h2 acordeon. acordeon un # 123;
culoare de fundal. #fff;
background-image. URL-ul # 40; gradient.jpg # 41; ;
background-image. -moz-liniar gradient # 40; de jos. # F1f1f1. #fff # 41; ;
background-image. -MS-liniar gradient # 40; de jos. # F1f1f1. #fff # 41; ;
background-image. o- liniar gradient # 40; de jos. # F1f1f1. #fff # 41; ;
background-image. -webkit-liniar gradient # 40; de jos. # F1f1f1. #fff # 41; ;
background-image. liniar gradient # 40; de jos. # F1f1f1. #fff # 41; ;
border-top. 1pixel #ddd solid;
culoare. # 222; font. 14px / 30px 'Verdana'. sans-serif;
înălțime. 30px; marjă. 0; umplutură. 0; text-liniuță. 10px;
# 125;
p # 123;
culoare. # 555; font. 12px / 18px 'Verdana'. sans-serif;
umplutură. 20px 10px;
# 125;
Cu aceste reguli creează comune tuturor metodelor, stilurile de bază „buton“ acordeon. gradientul sau CSS3 de fond în sine în browsere mai vechi nu va funcționa, deci are sens pentru a acoperi imaginea de fundal.
Cel mai important punct - jQuery:
$ # 40; document # 41;. gata # 40; funcție # 40; # 41; # 123;
$ # 40; '# Acordeon-js' # 41;. găsi # 40; 'H2' # 41;. clic # 40; funcție # 40; # 41; # 123;
$ # 40; acest # 41;. următor # 40; # 41;. stop # 40; # 41;. slideToggle # 40; # 41; ;
# 125; # 41;. următor # 40; # 41;. stop # 40; # 41;. ascunde # 40; # 41; ;
# 125; # 41; ;
Datorită selectorul este pe id container acordeon-Js. și elementul h2 în acesta. Urmări clicurile pe acest element, și o metodă .Etapele () selectați elementul următor după h2. în acest caz, punctul p. și deschis sau ascunde după al doilea clic.
Metoda 2: CSS3
HTML markup
Aici este conținutul.
Aici este conținutul.
h2 # 123;
culoare. # 002850; font-size. 30px; font-greutate. normale;
umplutură. 45px 0 15px; cursor. pointer;
# 125;
.acordeon # 123;
de frontieră. 1pixel #ddd solid; border-top. nici unul; marjă. 0 10px;
float. stânga; lățime. 470px; poziție. relativă;
# 125;
.acordeon un # 123;
afișare. bloc; text-decor. nici unul;
# 125;
.h2 acordeon. acordeon un # 123;
culoare de fundal. #fff;
background-image. URL-ul # 40; gradient.jpg # 41; ;
background-image. -moz-liniar gradient # 40; de jos. # F1f1f1. #fff # 41; ;
background-image. -MS-liniar gradient # 40; de jos. # F1f1f1. #fff # 41; ;
background-image. o- liniar gradient # 40; de jos. # F1f1f1. #fff # 41; ;
background-image. -webkit-liniar gradient # 40; de jos. # F1f1f1. #fff # 41; ;
background-image. liniar gradient # 40; de jos. # F1f1f1. #fff # 41; ;
border-top. 1pixel #ddd solid;
culoare. # 222; font. 14px / 30px 'Verdana'. sans-serif;
înălțime. 30px; marjă. 0; umplutură. 0; text-liniuță. 10px;
# 125;
p # 123;
culoare. # 555; font. 12px / 18px 'Verdana'. sans-serif;
umplutură. 20px 10px;
# 125;
Cu aceste reguli creează comune tuturor metodelor, stilurile de bază „buton“ acordeon. gradientul sau CSS3 de fond în sine în browsere mai vechi nu va funcționa, deci are sens pentru a acoperi imaginea de fundal.
Cel mai important punct - jQuery:
$ # 40; document # 41;. gata # 40; funcție # 40; # 41; # 123;
$ # 40; '# Acordeon-js' # 41;. găsi # 40; 'H2' # 41;. clic # 40; funcție # 40; # 41; # 123;
$ # 40; acest # 41;. următor # 40; # 41;. stop # 40; # 41;. slideToggle # 40; # 41; ;
# 125; # 41;. următor # 40; # 41;. stop # 40; # 41;. ascunde # 40; # 41; ;
# 125; # 41; ;
Datorită selectorul este pe id container acordeon-Js. și elementul h2 în acesta. Urmări clicurile pe acest element, și o metodă .Etapele () selectați elementul următor după h2. în acest caz, punctul p. și deschis sau ascunde după al doilea clic.