Ці ведаеце вы, што існуе ўласнае рашэнне HTML5, якое вельмі лёгка стварае акардэонную кнопку больш/менш, каб хаваць і паказваць змесціва з дапамогай НЯМА JavaScript або CSS. Чытайце далей, каб даведацца, як.
,en і Тэгі HTML5 афіцыйна з'яўляюцца a элемент віджэта раскрыцця інфармацыі, Але у пары Тэгі 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 для ўтойвання і выяўлення змесціва. Даволі крута, праўда?
Як гэта працуе? ,en тэг служыць абгорткай для элемента, які можна адкрыць або зачыніць. Карыстальнік павінен націснуць на ярлык, які з'яўляецца тэг, каб адкрыць або закрыць элемент.
Што наконт стылю і паводзін?
Стылі
Вы можаце прымяніць стылізацыю 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 і ён *павінен быць* даступным, але было ўстаноўлена, што фактычны выяўлены тэкст не заўсёды правільна аб'яўляецца праграмай чытання з экрана.
Спасылкі: