面板折疊插件——accordion
面板折疊插件可以實現(xiàn)頁面中指定區(qū)域類似“手風琴”的折疊效果，即點擊標題時展開內(nèi)容，再點另一標題時，關(guān)閉已展開的內(nèi)容，調(diào)用格式如下：
$(selector).accordion({options});
其中，參數(shù)selector為整個面板元素，options參數(shù)為方法對應(yīng)的配置對象。
例如，通過accordion插件展示幾個相同區(qū)域面板的折疊效果，如下圖所示：
在瀏覽器中顯示的效果：
從圖中可以看出，由于綁定了折疊面板插件，默認為第一個面板的內(nèi)容為展示狀態(tài)，點擊第二個面板主題時，展示主題對應(yīng)內(nèi)容，同時關(guān)閉上一個面板內(nèi)容。
任務(wù)
我來試試，親自調(diào)用折疊面板插件，實現(xiàn)多個面板的“手風琴”折疊效果。
在下列代碼的第25行，調(diào)用折疊面析插件的accordion()方法，實現(xiàn)頁面中多個面板的折疊效果。
- ?不會了怎么辦
-
- 首先，通過選擇器獲取Id號為“accordion”的元素，然后，根據(jù)該元素，調(diào)用
accordion()方法實現(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://idcbgp.cn/data/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="http://idcbgp.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>咱們交個朋友吧!</p>
</div>
</div>
<script type="text/javascript">
$(function () {
?
});
</script>
</body>
</html>
#divtest
{
width: 282px;
font-size: 13px;
}
ul li
{
height: 23px;
line-height: 23px;
}
請驗證，完成請求
由于請求次數(shù)過多，請先驗證，完成再次請求
