Foundation 折疊列表

在你想隱藏部分內(nèi)容的顯示時(shí)，可以使用折疊列表。

為保亭黎族等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計(jì)制作服務(wù)，及保亭黎族網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為成都做網(wǎng)站、成都網(wǎng)站設(shè)計(jì)、成都外貿(mào)網(wǎng)站建設(shè)、保亭黎族網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠(chéng)的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長(zhǎng)期合作。這樣，我們也可以走得更遠(yuǎn)！

實(shí)例

<
ul
class=
"accordion"
data-accordion
>

<
li
class=
"accordion-navigation"
>


<
a
href=
"#demo"
>Simple Collapsible
<
/a
>


<
div
id=
"demo"
class=
"content"
>

      菜鳥教程 -- 學(xué)的不僅是技術(shù)，更是夢(mèng)想?。?！


<
/div
>

<
/li
>

<
/ul
>

<
script
>

$(document).ready(function() {

$(document).foundation();

})

<
/script
>

嘗試一下 ?

實(shí)例解析

.accordion 類和 data-accordion 屬性用于創(chuàng)建一個(gè)可折疊的元素。 .accordion-navigation 類用于渲染可折疊元素。實(shí)際的內(nèi)容在 .content 類 (

我們?cè)诹斜眄?xiàng)中添加元素來控制（顯示/隱藏）可折疊的內(nèi)容。然后錨鏈接使用與可折疊內(nèi)容內(nèi)容相同的id ( 相關(guān)聯(lián))。

注意： 可折疊的效果需要初始化 Foundation JS。

默認(rèn)情況下，可折疊內(nèi)容是隱藏的。我們可以通過在

上添加 .active 類讓其默認(rèn)是顯示的：

實(shí)例

<
div
id=
"demo"
class=
"content active"
>

嘗試一下 ?

手風(fēng)琴效果

手風(fēng)琴效果用于延展與設(shè)置可折疊內(nèi)容。

手風(fēng)琴效果通過使用多個(gè)不同的錨鏈接與id來創(chuàng)建：

實(shí)例

<
ul
class=
"accordion"
data-accordion
>

<
li
class=
"accordion-navigation"
>


<
a
href=
"#demo"
>手風(fēng)琴實(shí)例 1
<
/a
>


<
div
id=
"demo"
class=
"content active"
>

      Demo 1 - 菜鳥教程 -- 學(xué)的不僅是技術(shù)，更是夢(mèng)想！?。?br />

<
/div
>

<
/li
>

<
li
class=
"accordion-navigation"
>


<
a
href=
"#demo2"
>手風(fēng)琴實(shí)例 2
<
/a
>


<
div
id=
"demo2"
class=
"content"
>

      Demo 2 - Lorem ipsum dolor sit amet....


<
/div
>

<
/li
>

<
li
class=
"accordion-navigation"
>


<
a
href=
"#demo3"
>手風(fēng)琴實(shí)例 3
<
/a
>


<
div
id=
"demo3"
class=
"content"
>

      Demo 3 - 菜鳥教程 -- 學(xué)的不僅是技術(shù)，更是夢(mèng)想！??！


<
/div
>

<
/li
>

<
/ul
>

嘗試一下 ?

默認(rèn)情況下，手風(fēng)琴列表項(xiàng)有一個(gè)是打開的。如果你想關(guān)閉所有可以使用 data-options="multi_expand:true;" 屬性:

實(shí)例

<
ul
class=
"accordion"
data-accordion data-options=
"multi_expand:true;"
>

..

<
/ul
>

嘗試一下 ?

網(wǎng)站欄目：創(chuàng)新互聯(lián)Foundation教程：Foundation 折疊列表
URL地址：http://m.5511xx.com/article/dhjeshh.html

日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

新聞中心

Foundation 折疊列表

實(shí)例

實(shí)例解析

實(shí)例

手風(fēng)琴效果

實(shí)例

實(shí)例

其他資訊