guxingzhe

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

 

分类:

技术点:

相关文章:

  • 2021-11-30
  • 2022-01-10
  • 2021-11-16
  • 2022-12-23
  • 2021-11-26
猜你喜欢
  • 2022-12-23
  • 2021-12-15
  • 2021-11-16
  • 2022-12-23
  • 2021-06-09
  • 2021-08-29
相关资源
相似解决方案