JQuery百度风云榜

最新推荐文章于 2021-06-05 04:14:29 发布

Bear

最新推荐文章于 2021-06-05 04:14:29 发布

阅读量318

点赞数

分类专栏： JQuery 文章标签： jquery 展开与折叠

本文链接：https://blog.csdn.net/bear_huangzhen/article/details/101448497

版权

JQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

示例（百度风云榜）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>百度风云榜</title>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
			}
			
			ul{
				list-style: none;
			}
			
			#outer{
				width: 100px;
				padding: 5px;
				border: 1px solid #000000;
				margin: 50px;
				background-color: #0066FF;
				color: #FFFFFF;
			}
			
			#outer li{
				line-height: 24px;
			}
			
			#outer li.on ul{
				display: block;   /*on状态下显示*/
			}
			
			#outer li.on span{
				background-image: url(img/close.png);
			}
			
			#outer ul{
				margin-left: 20px;
				display: none;   /*正常状态下隐藏*/
			}
			
			#outer span{
				background: url(img/open.png) no-repeat left center;
				background-size: 14px 14px;
				padding-left: 20px;
				cursor: pointer;
			}
		</style>
		<script type="text/javascript" src="js/jquery-1.12.4.js" ></script>
		<script type="text/javascript">
			$(function(){
				$("#outer span").click(function(){
					/*切换ul的on状态并同时remove掉其他ul的on状态*/
					$(this).parent().toggleClass("on").siblings().removeClass("on");
				});
			})
		</script>
	</head>
	<body>
		<ul id="outer">
			<li>
				<span>事件</span>
				<ul>
					<li>最近</li>
					<li>上周</li>
					<li>上月</li>
				</ul>
			</li>
			<li>
				<span>娱乐</span>
				<ul>
					<li>游戏</li>
					<li>电影</li>
					<li>电视</li>
				</ul>
			</li>
			<li>
				<span>人物</span>
				<ul>
					<li>美女</li>
					<li>帅哥</li>
					<li>明星</li>
				</ul>
			</li>
		</ul>
	</body>
</html>

Bear

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery百度风云榜

示例（百度风云榜）：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>百度风云榜</title> <style type="text/css"> *{ margin: 0px; padding: 0p...
复制链接

扫一扫