Toggler облегчает переключение любого элемента или анимацию любого элемента одним щелчком мыши. Мы можем переключать любой класс, указав атрибут data-toggler. Мы также можем сделать закрываемый элемент, используя атрибут data-closable.
Атрибуты переключателя Foundation CSS:
- data-toggler: класс, который мы хотим переключить.
- data-toggle: этот атрибут принимает идентификатор цели в качестве значения атрибута.
Синтаксис:
<p> <a data-toggle="exampleToggle">Toggle</a> </p> <ul class="menu" id="exampleToggle" data-toggler=".expanded"> Content </ul>
Пример 1. Этот пример иллюстрирует класс Toggler в Foundation CSS.
HTML
<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
title
>Foundation CSS Toggler</
title
>
<
link
rel
=
"stylesheet"
href
=
crossorigin
=
"anonymous"
>
<
script
src
=
crossorigin
=
"anonymous"
>
</
script
>
<
link
rel
=
"stylesheet"
href
=
<
script
src
=
</
script
>
<
script
src
=
integrity
=
"sha256-WUKHnLrIrx8dew//IpSEmPN/NT3DGAEmIePQYIEJLLs= sha384-53StQWuVbn6figscdDC3xV00aYCPEz3srBdV/QGSXw3f19og3Tq2wTRe0vJqRTEO sha512-X9O+2f1ty1rzBJOC8AXBnuNUdyJg0m8xMKmbt9I3Vu/UOWmSg5zG+dtnje4wAZrKtkopz/PEDClHZ1LXx5IeOw=="
crossorigin
=
"anonymous"
>
</
script
>
</
head
>
<
body
>
<
h1
style
=
"color: green;"
>
GeeksforGeeks
</
h1
>
<
h3
>Foundation CSS Toggler</
h3
>
<
p
>
<
a
data-toggle
=
"toggleExample"
>Toggle!</
a
>
</
p
>
<
ul
class
=
"menu"
id
=
"toggleExample"
data-toggler
=
".expanded"
>
<
li
>
<
a
href
=
"#"
>Menu 1</
a
>
</
li
>
<
li
>
<
a
href
=
"#"
>Menu 2</
a
>
</
li
>
<
li
>
<
a
href
=
"#"
>Menu 3</
a
>
</
li
>
<
li
>
<
a
href
=
"#"
>Menu 4</
a
>
</
li
>
<
li
>
<
a
href
=
"#"
>Menu 5</
a
>
</
li
>
</
ul
>
<
script
>
$(document).ready(function() {
$(document).foundation();
})
</
script
>
</
body
>
</
html
>
Пример 2. В этом примере класс выноски реализуется с атрибутом закрытия данных для закрытия панели в Foundation CSS.
HTML
<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
title
>Foundation CSS Toggler</
title
>
<
link
rel
=
"stylesheet"
href
=
crossorigin
=
"anonymous"
>
<
script
src
=
crossorigin
=
"anonymous"
>
</
script
>
<
link
rel
=
"stylesheet"
href
=
<
script
src
=
</
script
>
<
script
src
=
integrity
=
"sha256-WUKHnLrIrx8dew//IpSEmPN/NT3DGAEmIePQYIEJLLs= sha384-53StQWuVbn6figscdDC3xV00aYCPEz3srBdV/QGSXw3f19og3Tq2wTRe0vJqRTEO sha512-X9O+2f1ty1rzBJOC8AXBnuNUdyJg0m8xMKmbt9I3Vu/UOWmSg5zG+dtnje4wAZrKtkopz/PEDClHZ1LXx5IeOw=="
crossorigin
=
"anonymous"
>
</
script
>
</
head
>
<
body
>
<
h1
style
=
"color: green;"
>
GeeksforGeeks
</
h1
>
<
h3
>Foundation CSS Toggler</
h3
>
<
strong
>Close an element:</
strong
>
<
div
class
=
"callout"
data-closable>
<
button
class
=
"close-button"
data-close>×</
button
>
<
p
>
A Computer Science portal for geeks.
It contains well written, well thought
and well-explained computer science
and programming articles
</
p
>
</
div
>
<
div
class
=
"callout"
data-closable>
<
button
class
=
"close-button"
data-close>×</
button
>
<
img
src
=
alt
=
"GFG_logo"
>
</
div
>
<
script
>
$(document).ready(function() {
$(document).foundation();
})
</
script
>
</
body
>
</
html
>