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

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


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




  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值