下拉菜单(jq方法)

最新推荐文章于 2021-06-04 07:35:00 发布

转载最新推荐文章于 2021-06-04 07:35:00 发布 · 54 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/LWJ-booke/p/7080821.html

html代码:

<div class="left">
			<ul class="one_ul">
				<li class="one_li">
					<a href="">我的商店</a>
					<ul class="two_ul">
						<li>
							<a href="">我的商店</a>
						</li>
						<li>
							<a href="">我的商店</a>
						</li>
						<li>
							<a href="">我的商店</a>
						</li>
					</ul>
				</li>
				<li class="one_li">
					<a href="">我的商店</a>
					<ul class="two_ul">
						<li>
							<a href="">我的商店</a>
						</li>
						<li>
							<a href="">我的商店</a>
						</li>
						<li>
							<a href="">我的商店</a>
						</li>
					</ul>
				</li>
			</ul>
</div>

css代码:

<style type="text/css">
			.left {
				width: 200px;
				height: 502px;
			}
			
			.one_ul>li {
				width: 100%;
				text-align: center;
				font-size: 20px;
				border: 1px solid darkgray;
			}
			
			.two_ul {
				display: none;
			}
			.open{
				color: gray;
			}
			
			.two_ul li {
				width: 100%;
				text-align: center;
				font-size: 15px;
				background: gainsboro;
				border: 1px solid darkgray;
			}
</style>

jq代码:

<script src="js/jquery-2.1.0.js" type="text/javascript"></script>
		<script type="text/javascript">
			$('.one_li>a').click(function(){
				$(this).addClass('open').next().show().parent().siblings().children('a').removeClass('open').next().hide();
				return false;
			});
		</script>

　　这两篇的HTML大代码结构不同，原理是一样，分开来写，方便阅读!

转载于:https://www.cnblogs.com/LWJ-booke/p/7080821.html