JQ炫酷手风琴导航

最新推荐文章于 2024-07-10 10:10:23 发布

陈先生。

最新推荐文章于 2024-07-10 10:10:23 发布

阅读量193

点赞数

分类专栏：时刻记文章标签：前端手风琴导航 jq 炫酷手风琴导航

本文链接：https://blog.csdn.net/qq_40548277/article/details/83387769

版权

时刻记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
				list-style: none;
			}
			.content{
				width: 200px;
				position: absolute;
				left: 50%;
				top: 50%;
				margin-left: -100px;
				margin-top: -100px;
			}
			.list{
				width: 100%;
				text-align: center;
			}
			.list ul li p[class=title]{
				width: 100%;
				height: 50px;
				line-height: 50px;
				border-bottom: 1px #ccc solid;
				cursor: pointer;
				background-color: #ee3366;
				font-size: 20px;
				color: white;
			}
			.list ul li p[class=title]:hover{
				background-color: #ee6677;
			}
			.list ul li ul{
				overflow: hidden;
				display: none;
			}
			.list ul li ul li{
				position: relative;
				right: -100%;
				transition: right 0.5s ease-in-out; 
			}
			.list ul li ul li p{
				cursor: pointer;
				height: 50px;
				line-height: 50px;
				background-color: #CCCCCC;
				color: white;
			}
			.list ul li ul li p:hover{
				background-color: #5b5b5b;
			}
		</style>
	</head>
	<body>
		<div class="content">
			<div class="list">
				<ul>
					<li>
						<p class="title">ITEM1</p>
						<ul>
							<li>
								<p>Item1</p>
							</li>
							<li>
								<p>Item2</p>
							</li>
							<li>
								<p>Item3</p>
							</li>
							<li>
								<p>Item4</p>
							</li>
						</ul>
					</li>
					<li>
						<p class="title">ITEM2</p>
						<ul>
							<li>
								<p>Item1</p>
							</li>
							<li>
								<p>Item2</p>
							</li>
							<li>
								<p>Item3</p>
							</li>
							<li>
								<p>Item4</p>
							</li>
						</ul>
					</li>
					<li>
						<p class="title">ITEM3</p>
						<ul>
							<li>
								<p>Item1</p>
							</li>
							<li>
								<p>Item2</p>
							</li>
							<li>
								<p>Item3</p>
							</li>
							<li>
								<p>Item4</p>
							</li>
						</ul>
					</li>
					<li>
						<p class="title">ITEM4</p>
						<ul>
							<li>
								<p>Item1</p>
							</li>
							<li>
								<p>Item2</p>
							</li>
							<li>
								<p>Item3</p>
							</li>
							<li>
								<p>Item4</p>
							</li>
						</ul>
					</li>
				</ul>
			</div>
		</div>
		<script src="js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			  $(function(){
			  	$('.list ul li p').on("click",function(){
			  		$(this).stop().siblings('ul').slideToggle('fast')
			  		$(this).stop().parent().siblings().children("ul").slideUp('fast').siblings().slideDown('fast')
			  		var li = $(this).next().children("li")
			  		for(let i = 0 ; i<li.length;i++){
			  			li.eq(i).animate({
			  				"right":0
			  			},i*25)
			  		}
			  		$(this).parent().siblings().children("ul").children("li").css("right","-100%")
			  	})
			  })
		</script>
	</body>
</html>

陈先生。

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JQ炫酷手风琴导航

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; *{ padding: 0; margin: 0;
复制链接

扫一扫