Najlepszy samouczek Fundacja zwinąć listę W 2024 r. W tym samouczku możesz dowiedzieć się
efekt Akordeon,
Fundacja zwinąć listę
Gdy chcesz ukryć część wyświetlacza, można zwinąć listę.
Przykłady
<Ul class = "Dane akordeon" -accordion>
<Li class = "akordeon-navigation ">
<A Href = "#demo"> Proste Składany </ a>
<Div id = "demo" class = "content">
Ten poradnik - nauka jest nie tylko technika, ale również sen! ! !
</ Div>
</ Li>
</ Ul>
<! - Inicjowanie Fundacja JS ->
<Script>
$ (Document) .ready (function () {
$ (Document) .foundation ();
})
</ Script>
Spróbuj » Przykłady analityczne
.accordion
klas i data-accordion
atrybut jest używany do tworzenia składany element. .accordion-navigation
klasy wykorzystywane do renderowania elementów składanego. Rzeczywista zawartość .content
klasa (<div class = "content" ) i kliknij przycisk, aby wyświetlić albo.
Dodaliśmy do elementów listy <a>
element sterujący (pokaż / ukryj) składanego. Następnie zakotwiczyć związek z treści składanego z tym samym identyfikatorem treści (<a href=#demo" 与<div id="demo"> związane).
Uwaga: Efekt składania musi być inicjowane Foundation JS.
Domyślnie składane treść jest ukryta. Możemy w <div>
Poprzedni .active
klasy dopuszcza się domyślne okno:
Przykłady
<Div id = class "demo" = "content aktywny">
Spróbuj »
efekt Akordeon
Efekt Akordeon na rozbudowę i ustawić składanego treści.
Efekt Akordeon stosując wiele różnych kotwic i aby stworzyć link:
Przykłady
<Ul class = "Dane akordeon" -accordion>
<Li class = "akordeon-navigation ">
<A Href = "#demo"> Akordeon instancji 1 </ a>
<Div id = class "demo" = "content aktywny">
Demo 1 - Tutorial - Nauka to nie tylko technologia, ale również sen! ! !
</ Div>
</ Li>
<Li class = "akordeon-navigation ">
<A Href = "# demo2"> instancji Akordeon 2 </ a>
<Div id = "demo2" class = "content">
Demo 2 - Lorem ipsum dolor sit amet plpl
</ Div>
</ Li>
<Li class = "akordeon-navigation ">
<A Href = "# demo3"> instancji Akordeon 3 </ a>
<Div id = "demo3" class = "content">
Demo 3 - poradnik - nauka jest nie tylko technika, ale również sen! ! !
</ Div>
</ Li>
</ Ul>
Spróbuj » Domyślnie akordeon posiada element listy jest otwarta. Jeśli chcesz, aby zamknąć wszystkie mogą korzystać z data-options="multi_expand:true;"
;" Właściwości:
Przykłady
<Ul class = "Dane akordeon" -accordion data-options = "multi_expand: true;">
pl
</ Ul>
Spróbuj »