<script type="text/javascript">
$(function(){
$("#left").myaccordion();
});
</script>
</head>
<body>
<div id="left">
<ul class="navMenu navSelected">
<h3 class="navTitle">
<span class="navTilteTxt">使用者管理</span>
</h3>
<li class="navChild">
<a href="<%=request.getContextPath() %>/admin/user/users" target="content">使用者資訊管理</a>
</li>
<li class="navChild">
<a href="<%=request.getContextPath() %>/admin/group/groups" target="content">使用者組管理</a>
</li>
<li class="navChild">
<a href="<%=request.getContextPath() %>/admin/role/roles" target="content">使用者角色管理</a>
</li>
</ul>
<ul class="navMenu">
<h3 class="navTitle">
<span class="navTilteTxt">文章管理</span>
</h3>
<li class="navChild">
<a href="<%=request.getContextPath() %>/admin/channel/channels" target="content">欄目資訊管理</a>
</li>
<li class="navChild">
<a href="<%=request.getContextPath() %>/admin/topic/audits" target="content">文章資訊管理</a>
</li>
</ul>
<ul class="navMenu">
<h3 class="navTitle">
<span class="navTilteTxt">系統配置</span>
</h3>
<li class="navChild">
<a href="<%=request.getContextPath() %>/admin/cmsLink/links" target="content">超級連結管理</a>
</li>
<li class="navChild">
<a href="<%=request.getContextPath() %>/admin/system/baseinfo" target="content">網站資訊管理</a>
</li>
<li class="navChild">
<a href="<%=request.getContextPath() %>/admin/pic/indexPics" target="content">首頁圖檔管理</a>
</li>
<li class="navChild">
<a href="<%=request.getContextPath() %>/admin/backups" target="content">網站資料備份</a>
</li>
<li class="navChild">
<a href="<%=request.getContextPath() %>/admin/system/cleans" target="content">系統清理管理</a>
</li>
</ul>
</div>
</body>
</html>
//*********************************
<script type="text/javascript">
$(function(){
$("div").myaccordion({selectedClz:"selected"});
});
</script>
</head>
<body>
<div>
<ul class="selected">
<h3>aaaaaaaaaaaa</h3>
<li>aaaaaaaaaaaaaaaa</li>
<li>aaaaaaaaaaaaaaaa</li>
<li>aaaaaaaaaaaaaaaa</li>
<li>aaaaaaaaaaaaaaaa</li>
<li>aaaaaaaaaaaaaaaa</li>
<li>aaaaaaaaaaaaaaaa</li>
</ul>
<ul>
<h3>aaaaaaaaaaaa</h3>
<li>aaaaaaaaaaaaaaaa</li>
</ul>
<ul>
<h3>aaaaaaaaaaaa</h3>
<li>aaaaaaaaaaaaaaaa</li>
</ul>
<ul>
<h3>aaaaaaaaaaaa</h3>
<li>aaaaaaaaaaaaaaaa</li>
</ul>
</div>
</body>
</html>//*******************************
(function($){
$.fn.myaccordion=function(opts){
var settings=$.extend({
selectedClz:"navSelected",
titleTagName:"h3"
},opts||{});
var titleNode=$(this).find("ul>"+settings.titleTagName);
var selectedNode=$(this).find("ul."+settings.selectedClz+">"+settings.titleTagName);
titleNode.css("cursor","pointer");
titleNode.nextAll().css("display","none");
selectedNode.nextAll().css("display","block");
titleNode.click(function(){
var checked=$(this).parent("ul").hasClass(settings.selectedClz);//$(this)-->titleNode
if(checked){
$(this).parent().removeClass(settings.selectedClz);
$(this).nextAll().slideUp();
}else{
$(this).parent().addClass(settings.selectedClz);
$(this).nextAll().slideDown();
}
});
}
})(jQuery)
![CSS的僞元素和僞類的差別[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)