Jquery插件编写，关于实现左侧目录列表关闭开启

来源：互联网发布：网络用语lg是什么意思编辑：程序博客网时间：2024/05/17 21:46

实现网站左侧目录列表点击收起放开的效果：

（1）插件编写

/*定义插件，要将插件放到闭包中*/

(function($){$.fn.myaccordion = function(opts) {//指的是为这个闭包定义了一个变量叫$,然后传的值是jQueryvar 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>

0 0