參考1：asp.net+jquery accordion 按鈕點擊會收縮
說明：參考1的資料符合我要實作的需求，在此作了些補充及修改。另外下方的程式碼，少了另外一個登入的頁面，當使用者登入成功後，將會指定 $.cookie('index',0); ，轉到另外一個頁面(下方的程式碼)後accordion就會預設展開我們要展開的項目，因為有指定cookie的關係，當使用者重新整理時，accordion就會停留在目前點擊的項目。
程式碼如下
<head>
<title></title>
<link rel="stylesheet" href="themes/base/jquery.ui.all.css">
<script type="text/javascript" src="Scripts/jquery.js"></script>
<script src="Scripts/jquery.cookie.js"></script>
<script src="Scripts/jquery.ui.core.js"></script>
<script src="Scripts/jquery.ui.widget.js"></script>
<script src="Scripts/jquery.ui.accordion.js"></script>
<script>
$(function () {
//同時設定 active: false,collapsible: true 可讓項目呈現不摺疊(不展開)狀態
$('#accordion').accordion({
activate: function (event, ui) {
//當click時觸發此處
if (($.cookie('index') == null) || ($.cookie('index')==undefined)) {
$.cookie('index', 0);
}else{
$.cookie('index', $('#accordion').accordion('option', 'active'));
};
},
active: parseInt($.cookie('saved_index'),10),
collapsible: true,
});
});
</script>
<style>
/**設定摺疊標題文字大小 padding: .5em .5em .5em .7em;*/
.ui-accordion .ui-accordion-header { display: block; font-size: 16px; }
/*設定摺疊標題為置**/
.ui-accordion .ui-accordion-icons {padding-left: 1.5em;}
/**.ui-accordion .ui-accordion-content 設定摺疊內容文字位置*/
.ui-accordion .ui-accordion-content {padding: 0.5em 0.5em; border-top: 0; overflow: auto; zoom: 1;}
</style>
<link type="text/css" rel="stylesheet" href="public_css.css"/>
</head>
<body>
<form id="form1">
<div id="accordion">
<h4>項目1</h4>
<div>
<a>子項目1</a><br/>
<a>子項目2</a>
</div>
<h4>項目2</h4>
<div>
<a>子項目1</a><br/>
<a>子項目2</a>
</div>
<h4>項目3</h4>
<div>
<a>子項目1</a><br/>
<a>子項目2</a>
</div>
</div>
</form>
</body>
</html>
沒有留言:
張貼留言