实现网站左侧目录列表点击收起放开的效果:
(1)插件编写
/*定义插件,要将插件放到闭包中*/
(function($){
$.fn.myaccordion = function(opts) {//指的是为这个闭包定义了一个变量叫$,然后传的值是jQuery
var settings = $.extend({
selectedClz:"navSelected",
titleTagName:"h3"
},opts||{});//传递参数时可以将settings.selectedClz的值通过程序实时改变,上面为默认值
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().hasClass(settings.selectedClz);
if(checked) {
$(this).parent().removeClass(settings.selectedClz);
$(this).nextAll().slideUp();
} else {
$(this).parent().addClass(settings.selectedClz);
$(this).nextAll().slideDown();
}
});
};
})(jQuery)
(2)前端列表代码
<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 navSelected">
<h3 class="navTitle">
<span class="navTilteTxt">文章管理</span>
</h3>
<li class="navChild">
<a href="<%=request.getContextPath() %>/admin/channel/cm" target="content">栏目信息管理</a>
</li>
<li class="navChild">
<a href="<%=request.getContextPath() %>/admin/article/publishs" target="content">文章信息管理</a>
</li>
</ul>
<ul class="navMenu">
<h3 class="navTitle">
<span class="navTilteTxt">系统配置</span>
</h3>
<li class="navChild">
<a href="<%=request.getContextPath() %>/admin/hyperlink/hyperlinks" target="content">超级链接管理</a>
</li>
<li class="navChild">
<a href="<%=request.getContextPath() %>/admin/webInfo/showWebInfo" target="content">网站信息管理</a>
</li>
<li class="navChild">
<a href="<%=request.getContextPath() %>/admin/newImgManage/newImgManage" target="content">首页图片管理</a>
</li>
<li class="navChild">
<a href="<%=request.getContextPath() %>/admin/backup/sqls" target="content">网站数据备份</a>
</li>
<li class="navChild">
<a href="<%=request.getContextPath() %>/admin/systemClean/articleList" target="content">系统清理管理</a>
</li>
</ul>
</div>
(3)效果前端调用
<script type="text/javascript">
$(function(){
$("#left").myaccordion({selectedClz:"navSelected"});
});
</script>