jQuery添加产品分类菜单展开收缩特效代码下载


jQuery添加产品分类菜单展开收缩特效代码下载
jQuery添加产品分类菜单展开收缩特效代码下载以及产品分类、菜单展开收缩等js/jquery网页特效代码下载。

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/public.css" />

2. 引入JS

<script type="text/javascript" src="js/jquery.min.js"></script>

3. HTML代码

		<div class="layout-container">
			<div class="layout-cont">
				<h3 class="layout-cont-title">添加产品分类<span>产品入库</span></h3>
				<div class="layout-cont-main">
					<div class="add-newclass">
						<form action="">
							<div class="category-cont">
								<!--大分类-->
								<div class="big-box category-box">
									<div class="big-category category">
										<input type="text" readonly value="电器" />
										<div class="btns">
											<a><img src="img/icon_add.png" /></a>
											<a><img src="img/icon_edit.png" /></a>
											<a><img src="img/icon_close.png" /></a>
											<a class="up-btn"><img src="img/icon_bottom.png" /></a>
										</div>
									</div>
									<!--子分类-->
									<div class="in-box category-box">
										<div class="in-category category">
											<input type="text" readonly value="空调" />
											<div class="btns">
												<a><img src="img/icon_add.png" /></a>
												<a><img src="img/icon_edit.png" /></a>
												<a><img src="img/icon_close.png" /></a>
												<a class="up-btn"><img src="img/icon_bottom.png" /></a>
											</div>
										</div>
										<!--小分类-->
										<div class="small-box category-box">
											<div class="small-category category">
												<input type="text" readonly value="A163" />
												<div class="btns">
													<a><img src="img/icon_edit.png" /></a>
													<a><img src="img/icon_close.png" /></a>
												</div>
											</div>
											<div class="small-category category">
												<input type="text" readonly value="A201" />
												<div class="btns">
													<a><img src="img/icon_edit.png" /></a>
													<a><img src="img/icon_close.png" /></a>
												</div>
											</div>
											<div class="small-category category">
												<input type="text" readonly value="B85" />
												<div class="btns">
													<a><img src="img/icon_edit.png" /></a>
													<a><img src="img/icon_close.png" /></a>
												</div>
											</div>
											<div class="small-category category">
												<input type="text" readonly value="B127" />
												<div class="btns">
													<a><img src="img/icon_edit.png" /></a>
													<a><img src="img/icon_close.png" /></a>
												</div>
											</div>
										</div>
									</div>
									<div class="in-box category-box">
										<div class="in-category category">
											<input type="text" readonly value="洗衣机" />
											<div class="btns">
												<a><img src="img/icon_add.png" /></a>
												<a><img src="img/icon_edit.png" /></a>
												<a><img src="img/icon_close.png" /></a>
											</div>
										</div>
									</div>
									<div class="in-box category-box">
										<div class="in-category category">
											<input type="text" readonly value="冰箱" />
											<div class="btns">
												<a><img src="img/icon_add.png" /></a>
												<a><img src="img/icon_edit.png" /></a>
												<a><img src="img/icon_close.png" /></a>
											</div>
										</div>
									</div>
								</div>
								<div class="big-box category-box">
									<div class="big-category category">
										<input type="text" readonly value="厨具" />
										<div class="btns">
											<a><img src="img/icon_add.png" /></a>
											<a><img src="img/icon_edit.png" /></a>
											<a><img src="img/icon_close.png" /></a>
										</div>
									</div>
								</div>
							</div>
							<div class="operation-btns">
								<a href="addCategory.html" class="layout-btn">+ 添加新分类</a>
								<input type="submit" class="layout-btn subbtn" value="保存" />
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
		<script type="text/javascript">
			$('.category-cont').on('click', '.up-btn', function() {
				var _this = $(this);
				_this.toggleClass('up-btn-on');
				var category = _this.parents('.category');
				category.parent().height('auto');
				category.siblings('.category-box').stop().slideToggle(300);
			})
		</script>

相关推荐

发表评论

相关文章