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

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

Jquery插件编写,关于实现左侧目录列表关闭开启_第1张图片

(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>




你可能感兴趣的:(Jquery插件编写,关于实现左侧目录列表关闭开启)