使用JQuery
簡單的做到選單摺疊的功能！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>摺疊選單</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$('.ann_header')
.hover(function() {
cursorChange(this);
})
.click(function() {
foldToggle(this);
});
//.trigger('click');
$('.ann_sub_header')
.hover(function() {
cursorChange(this);
})
.click(function() {
foldToggle(this);
})
.trigger('click'); // 預設是折疊起來
});
// 打開or摺疊選單
function foldToggle(element) {
$(element).next('ul').slideToggle();
}
// 讓游標移到標題上時，圖案會變成手指
function cursorChange(element, cursorType) {
$(element).css('cursor', 'pointer');
}
</script>
</head>
<body>
<ul>
<li>
<h3 class='ann_header'>---大標題1---</h3>
<ul>
<li>
<h4 class='ann_sub_header'>---小標題1---</h4>
<ul>
<li>
---內容1---
</li>
<br/>
<li>
---內容2---
</li>
</ul>
</li>
</ul>
</li>
<li>
<h3 class='ann_header'>---大標題2---</h3>
<ul>
<li>
<h4 class='ann_sub_header'>---小標題2---</h4>
<ul>
<li>
---內容3---
</li>
<br/>
<li>
---內容4---
</li>
<br/>
<li>
---內容5---
</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
文章標籤
全站熱搜
留言列表
