面板折疊插件——accordion
面板折疊插件可以實(shí)現(xiàn)頁(yè)面中指定區(qū)域類似“手風(fēng)琴”的折疊效果，即點(diǎn)擊標(biāo)題時(shí)展開內(nèi)容，再點(diǎn)另一標(biāo)題時(shí)，關(guān)閉已展開的內(nèi)容，調(diào)用格式如下：
$(selector).accordion({options});
其中，參數(shù)selector為整個(gè)面板元素，options參數(shù)為方法對(duì)應(yīng)的配置對(duì)象。
例如，通過accordion插件展示幾個(gè)相同區(qū)域面板的折疊效果，如下圖所示：
在瀏覽器中顯示的效果：
從圖中可以看出，由于綁定了折疊面板插件，默認(rèn)為第一個(gè)面板的內(nèi)容為展示狀態(tài)，點(diǎn)擊第二個(gè)面板主題時(shí)，展示主題對(duì)應(yīng)內(nèi)容，同時(shí)關(guān)閉上一個(gè)面板內(nèi)容。
任務(wù)
我來試試，親自調(diào)用折疊面板插件，實(shí)現(xiàn)多個(gè)面板的“手風(fēng)琴”折疊效果。
在下列代碼的第25行，調(diào)用折疊面析插件的accordion()方法，實(shí)現(xiàn)頁(yè)面中多個(gè)面板的折疊效果。
- ?不會(huì)了怎么辦
-
- 首先，通過選擇器獲取Id號(hào)為“accordion”的元素，然后，根據(jù)該元素，調(diào)用
accordion()方法實(shí)現(xiàn)面板的折疊效果。
- “accordion”書寫是否正確。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>面板折疊插件</title>
<link href="Css/jquery-ui.css" rel="stylesheet" type="text/css" />
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="http://yifanck.cn/data/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="http://yifanck.cn/data/jquery-ui-1.9.2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="divtest">
<div id="accordion">
<h3>
<a href="#">白富美</a></h3>
<p>咱們結(jié)婚吧!</p>
<h3>
<a href="#">土豪族</a></h3>
<p>咱們交個(gè)朋友吧!</p>
</div>
</div>
<script type="text/javascript">
$(function () {
?
});
</script>
</body>
</html>
#divtest
{
width: 282px;
font-size: 13px;
}
ul li
{
height: 23px;
line-height: 23px;
}
請(qǐng)驗(yàn)證，完成請(qǐng)求
由于請(qǐng)求次數(shù)過多，請(qǐng)先驗(yàn)證，完成再次請(qǐng)求
