css折叠日期时间线时间轴效果代码-html代码-BFW代码库

css折叠日期时间线时间轴效果代码

代码语言：html

代码描述：css折叠日期时间线时间轴效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
    @charset "utf-8";
/* CSS Document */
* {
	margin: 0;
	padding: 0;
}
body {
	font-size: 12px;
}
li {
	list-style: none;
}
a {
	text-decoration: none;
}
.timeline {
	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAAcSURBVHjaYnz9+vV/BjTAxIAFUCgIAAAA//8DAILHA8pW2pZ5AAAAAElFTkSuQmCC) repeat-y 10px;
	width: 80px;
	float: left;
}
.year li .year-button {
	cursor: pointer;
	background: url(//repo.bfw.wiki/bfwrepo/image/606699e573c4e.png) 0px -175px no-repeat;
	height: 25px;
	padding-left: 22px;
	margin-left: 8px;
	line-height: 25px;
}
.year li .year-button:hover {
	background: url(//repo.bfw.wiki/bfwrepo/image/606699e573c4e.png) 0px -29px no-repeat
}
.year>.active .year-button {
	background: url(//repo.bfw.wiki/bfwrepo/image/606699e573c4e.png) 0px 0px no-repeat;
	color: #FFF;
}
.year>.active .year-button:hover {
	background: url(//repo.bfw.wiki/bfwrepo/image/606699e573c4e.png) 0px 0px no-repeat;
	color: #FFF;
}
.month {
	display: none;
	margin-left: 7px;
}
.active>.month {
	display: block
}
.month>li {
	cursor: pointer;
	height: 25px;
	padding-right: 25px;
	line-height: 25px;
	text-align: right;
}
.month>li a {
	color: #000000;
}
.month>li.active {
	background: url(//repo.bfw.wiki/bfwrepo/image/606699e573c4e.png) 0px -89px no-repeat;
}
.month>li.active a {
	color: #FFF;
}
.month>li:hover {
	background: url(//repo.bfw.wiki/bfwrepo/image/606699e573c4e.png) 0px -119px no-repeat;
}
.month>li.active:hover {
	background: url(//repo.bfw.wiki/bfwrepo/image/606699e573c4e.png) 0px -89px no-repeat;
}
</style>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
   $(function(){
    //隐藏所有子栏目（除第一个栏目外）
	$(".year:not(:first)").find(".month").hide();
	//点击大栏目
	  $(".year>li").click(function(){
		  $("li.active",$(this).parent()).removeClass("active");
		  $(this).addClass("active");
		  $("ul>li:first",this).addClass("active");		  		  
	  });
	  $(".month>li").click(function(){
		  var $ul=$(this).parent();		  
		  $ul.find(".active").removeClass("active");		  
		  $(this).addClass("active");
          return false;		  
	  });
   });
	  
</script>
</head>
<body>
<div class="box">
	<div class="timeline">
		<ul class="year">
			<!--year-->
			<li>
				<div class="year-button"> 2016 </div>
				<ul class="month">.........完整代码请登录后点击上方下载按钮下载查看