码迷,mamicode.com
首页 > 其他好文 > 详细

手风琴效果菜单

时间:2016-03-21 12:04:17      阅读:151      评论:0      收藏:0      [点我收藏+]

标签:

js:

$(function() {
	/*****************菜单手风琴效果 start******************/
	var Accordion = function(el, multiple) {
		this.el = el || {};
		this.multiple = multiple || false;

		// Variables privadas
		var menus = this.el.find(‘.menu‘);
		// Evento
		menus.on(‘click‘, {el: this.el, multiple: this.multiple}, this.dropdown)
	}

	Accordion.prototype.dropdown = function(e) {
		var $el = e.data.el;
			$this = $(this),
			$next = $this.next();

		$next.slideToggle();
		$this.parent().toggleClass(‘open‘);

		if (!e.data.multiple) {
			$el.find(‘.submenu‘).not($next).slideUp().parent().removeClass(‘open‘);
		};
	}	
	var accordion = new Accordion($(‘.accordion‘), false);
	/*****************菜单手风琴效果 end******************/
	
});

 html:

     <!-- aside menu start -->
	<div id="aside-menu">
		<ul id="accordion" class="accordion">
			
			<li>
				<div class="menu"><i class="glyphicon glyphicon-tasks"></i> <span>入库管理</span><i class="glyphicon glyphicon-chevron-right pull-right"></i></div>
				<ul class="submenu">
					<li><a href="#">采购订单</a></li>
					<li><a href="#">收货</a></li>
					<li><a href="#">入库计划</a></li>
					<li><a href="#">组托上架</a></li>
					<li><a href="#">采购退货</a></li>
					<li><a href="#">展示信息</a></li>
					<li><a href="#">采购发票</a></li>
				</ul>
			</li>
			<li>
				<div class="menu"><i class="glyphicon glyphicon-user"></i> <span>出库管理</span><i class="glyphicon glyphicon-chevron-right pull-right"></i></div>
				<ul class="submenu">
					<li><a href="#">订单</a></li>
					<li><a href="#">出库计划</a></li>
					<li><a href="#">出库顺序</a></li>
					<li><a href="#">销售退货</a></li>
					<li><a href="#">销售发票</a></li>
				</ul>
			</li>
			<li>
				<div class="menu"><i class="glyphicon glyphicon-user"></i> <span>库存管理</span><i class="glyphicon glyphicon-chevron-right pull-right"></i></div>
				<ul class="submenu">
					<li><a href="#">货位图</a></li>
					<li><a href="#">盘点计划</a></li>
					<li><a href="#">盘点作业</a></li>
					<li><a href="#">库存调整</a></li>
				</ul>
			</li>
			
		</ul>
	</div>
	<!-- aside menu end -->

 

手风琴效果菜单

标签:

原文地址:http://www.cnblogs.com/guxingzhe/p/5300919.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!