利用jQuery实现添加产品分类菜单代码



7 26 9



特效描述:利用jQuery实现 添加产品 分类菜单代码,利用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="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="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="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="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="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="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="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="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="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>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 切换按钮 表单 表单美化 表单插件 表单美化插件 下拉框 select下拉菜单 select美化 select美化框 添加标签

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到