Фонд свернуть список
Если вы хотите, чтобы скрыть часть экрана, вы можете свернуть список.
примеров
<Li класс = "гармошки навигации ">
<A HREF = "#demo"> Simple складная </ а>
<Div ID = "демо" класс = "содержание">
Этот учебник - наука не только технологии, но и мечта! ! !
</ Div>
</ Li>
</ UL>
<! - Initialization Фонд JS ->
<Script>
$ (Документ) .ready (функция () {
$ (Документ) .foundation ();
})
</ Script>
Попробуйте »
Примеры аналитических
.accordion классы и data-accordion атрибут используется для создания разборную элемента. .accordion-navigation класс , используемый для визуализации элементов сборно - разборные. Фактическое содержание .content класса (<DIV класс = "содержание" ) и нажмите на кнопку , чтобы отобразить либо.
Мы добавили к элементам списка <a> элемент для управления (показать / скрыть) складного. Затем якорь связь с телескопическим контента с одинаковым идентификатором содержания (<a href=#demo" 与<div id="demo"> связаны).
Примечание: Складывание эффект должен быть инициализирован Foundation JS.
По умолчанию, сборно-разборные содержание скрыто. Мы можем в <div> Предыдущий .active класс разрешен по умолчанию дисплей:
Аккордеон эффект
Аккордеон эффект для расширения и набора складного содержания.
Аккордеон эффект с помощью множества различных якорей и идентификатор, чтобы создать ссылку:
примеров
<Li класс = "гармошки навигации ">
<A HREF = "#demo"> Аккордеон экземпляр 1 </ а>
<Div ID = класс "демо" = "содержание активного">
Демо-версия 1 - учебник - наука не только технологии, но и мечта! ! !
</ Div>
</ Li>
<Li класс = "гармошки навигации ">
<A HREF = "# demo2"> Аккордеон экземпляр 2 </ а>
<Div ID = "demo2" класс = "содержание">
Demo 2 - Lorem Ipsum Dolor сидеть Амет ....
</ Div>
</ Li>
<Li класс = "гармошки навигации ">
<A HREF = "# demo3"> Аккордеон экземпляр 3 </ а>
<Div ID = "demo3" класс = "содержание">
Демо-3 - учебник - наука не только технологии, но и мечта! ! !
</ Div>
</ Li>
</ UL>
Попробуйте »
По умолчанию, аккордеон имеет элемент списка открыт. Если вы хотите , чтобы закрыть все могут использовать data-options="multi_expand:true;" ;" свойства:
примеров
..
</ UL>
Попробуйте »