Գիտե՞ք, որ կա բնիկ HTML5 լուծում՝ շատ հեշտությամբ ստեղծելու ակորդեոն՝ կարդալ ավելին/պակաս կոճակը՝ բովանդակությունը թաքցնելու և բացահայտելու համար: ՈՉ JavaScript կամ CSS. Կարդացեք՝ պարզելու համար, թե ինչպես:
The և HTML5 թեգերը պաշտոնապես ա բացահայտման վիդջեթի տարր, Սակայն զուգորդված է HTML5 թեգերը ձեզ կտան մաքուր HTML-միայն ակորդեոն.
իմաստ ոչ JS ԿԱՄ CSS պահանջվում է. Որքա՜ն թույն է դա։
Ահա մի օրինակ, որը ցույց է տալիս a-ով պարզ տարր և .
Ահա կոդը ՝
<details>
<summary>Read More</summary>
<p>This is a native HTML5 accordion to hide and reveal content. Pretty cool, right?</p>
</details>և ահա թե ինչպիսի տեսք կունենա.
Կարդալ ավելին
Սա բնիկ HTML5 ակորդեոն է՝ թաքցնելու և բացահայտելու բովանդակությունը: Բավականին թույն, չէ՞:
Ինչպես է դա աշխատում? The պիտակը ծառայում է որպես փաթաթող տարրի համար, որը կարող է բացվել կամ փակվել: Օգտագործողը պետք է սեղմի պիտակի վրա, որը հանդիսանում է հատկորոշել տարրը բացելու կամ փակելու համար:
Ինչ վերաբերում է ոճին և վարքին:
Որոնվածը
Դուք կարող եք կիրառել CSS ոճավորում՝ բացահայտման տեքստային տուփի տեսքը հարմարեցնելու համար: Ստորև բերված է ներդիրներով ինտերֆեյսի ոճ.
details {
font: 16px "Open Sans", Calibri, sans-serif;
width: 620px;
}
details > summary {
padding: 2px 6px;
width: 15em;
background-color: #ddd;
border: none;
box-shadow: 3px 3px 4px black;
cursor: pointer;
}
details > p {
border-radius: 0 0 10px 10px;
background-color: #ddd;
padding: 2px 6px;
margin: 0;
box-shadow: 3px 3px 4px black;
}
details[open] > summary {
background-color: #ccf;
}Լռելյայնորեն, կուրսորը հայտնվում է սլաքի պես, բայց եթե ցանկանում եք, որ այն լինի a ցույց տալով ձեռքը փոխարենը, ապա օգտագործեք սա.
details {
cursor: pointer;
}Բժիշկները
Վարքագծի կարգավորումը շատ սահմանափակ է, իրականում միայն մեկ բան կարող ես անել, դա բացահայտված տեքստը պատրաստելն է բացել լռելյայն.
Ակորդեոնը բաց վիճակում սկսելու համար ավելացրեք բուլյան բացել վերագրել է պիտակ:
<details open>
<summary>Read More</summary>
<p>This is a native HTML5 accordion to hide and reveal content. Pretty cool, right?</p>
</details>Կարդալ ավելին
Սա բնիկ HTML5 ակորդեոն է՝ թաքցնելու և բացահայտելու բովանդակությունը: Բավականին թույն, չէ՞:
Ի՞նչ հատկանիշներ կարող եմ օգտագործել:
Ստորև բերված ատրիբուտները կարող են օգտագործվել դրա համար պիտակ:
| Վերագրել | Արժեք | Ամփոփում |
|---|---|---|
| բացել | բացել | Կանխադրված է բաց չէ. |
| id | արժեք | Ապահովում է եզակի նույնացուցիչ: |
| դաս | դասի անունները | Տարրերին դասերի անուններ է հատկացնում: |
| ոճ | CSS-արժեքներ | Տարրին վերագրում է CSS ոճեր: |
Այսպիսով, որո՞նք են սահմանափակումները: Միշտ կա որսորդություն, այնպես չէ՞:
Internet Explorer-ի աջակցություն չկա
Այս միայն HTML5 ակորդեոնը չի աշխատի Internet Explorer-ի ոչ մի տարբերակում: Եթե դուք պետք է այն աջակցեք IE11-ին, դուք պետք է օգտագործեք այլ հետադարձ լուծում՝ օգտագործելով JQuery: Բոլոր մյուս բրաուզերները աջակցում են և .
Չկան հարմարեցված անիմացիաներ կամ անցումներ
Թեև դուք կարող եք փոփոխել և ոճավորել արտաքին տեսքը (ինչպես ցույց է տրված վերևում), դուք չեք կարողանա որևէ տեքստ բացահայտել անիմացիաներ կամ անցումներ: Եթե ցանկանում եք դա անել, ձեզ անհրաժեշտ կլինի մեկ այլ CSS/JSS ակորդեոնի լուծում:
Էկրանի ընթերցիչներ և հասանելիություն
Սա բնիկ է HTML5 և այն *պետք է* հասանելի լինի, բայց պարզվել է, որ իրական բացահայտված տեքստը միշտ չէ, որ ճիշտ է հայտարարվում էկրանի ընթերցողի կողմից:
Հիշատակում:
