一.通过动画

实现思路

1.新建一个容器 Telescopic，此处设置弹性盒子使其水平居中；
2.容器中新建一个ul列表 给li高；
3.列表中存放两个div,分别命名tsctop和tscfoot 用来存放标题与内容；
注意：在tscfoot中写上overflow: hidden样式，防止tscfoot溢出,height设置为0;
4.jquery思路
（1）给tsctop添加点击事件，目的当点击tsctop时通过animate（）事件改变tscfoot的高度。
（2）用$(this)获取到tsctop（this表示当前对象的引用），然后用next()方法获取到tscfoot（next（）表示下一个兄弟节点）
（3）当改变tscfoot的高度时，使用siblings（）方法获取到同胞节点的tscfoot类 还原高度

实现代码

html

		<div class="Telescopic">
			<ul>
				<li>
					<div class="tsctop">
						<h1>首页</h1>
					</div>
					<div class="tscfoot">
						内容
					</div>
				</li>
				<li>
					<div class="tsctop">
						<h1>栏目1</h1>
					</div>
					<div class="tscfoot">
						内容
					</div>
				</li>
				<li>
					<div class="tsctop">
						<h1>栏目2</h1>
					</div>
					<div class="tscfoot">
						内容
					</div>
				</li>
				<li>
					<div class="tsctop">
						<h1>栏目3</h1>
					</div>
					<div class="tscfoot">
						内容
					</div>
				</li>

			</ul>
		</div>

css

* {
				margin: 0px;
				padding: 0px;
				list-style: none;
			}

				
			html{
				    background: #84848473;
			}
			.Telescopic {
				margin: auto;
				width: auto;
				display: flex;
				justify-content: center;
			}

			li {
				width: 500px;
			}

			.tsctop {
				width: 100%;
				height: 50px;
				background-color: #ecffff;
				transition: .55s ease;
				border-bottom: 1px solid #ddd;
			}

			.tsctop:hover {
				cursor: pointer;
			}

			.tsctop h1 {
				color: #616161;
				font-size: 16px;
				text-align: center;
				line-height: 50px;
			}

			.tscfoot {
				width: 100%;
				height: 0px;

				background-color: skyblue;
				overflow: hidden;
				/* 防止tscfoot溢出 */



			}

javascript

			$(function() {
				$(‘.tsctop‘).click(function() {
					$(this).next().animate({
						"height": "500px"
					}, 200).parent().siblings().find(‘.tscfoot‘).animate({
						"height": "0px"
					}, 200);
				})

			})

示例

二.通过slideToggle()

这种方法与第一种方法相比 添加了切换的按钮和再次点击时隐藏

实现思路

1.切换按钮 为按钮添加类样式ico 并通过jquery遍历方法使点击同胞元素时删除类样式ico 通过累加器判断i是否为奇数 使用html（）或者replaceWith（）改变按钮节点
2.伸缩 给tsctop添加slideToggle()事件;
注意:(1)给tscfoot 高（2）将tscfoot设置为display：none；

实现代码

html

<div class="Telescopic">
			<ul>
				<li>
					<div class="tsctop ss">
						<div>
							<h1>首页</h1>
						</div>
						<div class="lick">
							<p>十</p>
						</div>
					</div>
					<div class="tscfoot">
						内容
					</div>
				</li>
				<li>
					<div class="tsctop">
						<div>
							<h1>栏目1</h1>
						</div>

						<div class="lick">
							<p>十</p>
						</div>
					</div>
					<div class="tscfoot">
						内容
					</div>
				</li>
				<li>
					<div class="tsctop">
						<div>
							<h1>栏目2</h1>
						</div>

						<div class="lick">
							<p>十</p>
						</div>
					</div>
					<div class="tscfoot">
						内容
					</div>
				</li>
				<li>
					<div class="tsctop">
						<div>
							<h1>栏目3</h1>
						</div>

						<div class="lick ico">
							<p>十</p>
						</div>
					</div>
					<div class="tscfoot  ss">
						内容
					</div>
				</li>

			</ul>
		</div>
		

css

	* {
				margin: 0px;
				padding: 0px;
				list-style: none;
			}


			html {
				background: #84848473;
			}

			.Telescopic {
				margin: auto;
				width: auto;
				display: flex;
				justify-content: center;
			}

			li {
				width: 500px;
			}

			.tsctop {
				width: 100%;
				height: 50px;
				background-color: #ecffff;
				transition: .55s ease;
				border-bottom: 1px solid #ddd;
				overflow: hidden;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
			}

			.tsctop:hover {
				cursor: pointer;
			}

			.tsctop h1 {
				color: #616161;
				font-size: 16px;
				text-align: center;
				line-height: 50px;
			}

			.tscfoot {
				/*
					(1)给高
					（2）隐藏
					
				*/
				width: 100%;
				height: 450px;
				display: none;
				background-color: skyblue;
				overflow: hidden;
				/* 防止tscfoot溢出 */



			}

			.lick p {
				font-size: 16px;
			}

			.lick:hover {
				cursor: pointer;
			}

javascript

			$(function() {
				let i=0;
				$(‘.lick‘).click(function() {
					// 1.按钮
					$(this).addClass(‘ico‘).parents(‘li‘).siblings().find(‘.lick‘).removeClass(‘ico‘);
					i++;
					(i%2==1)?($(‘.ico‘).find(‘p‘).html("<p>一</p>")):($(‘.ico‘).find(‘p‘).html("<p>十</p>"))
					// 伸缩
					$(‘.ico‘).parents(‘.tsctop‘).next().slideToggle();

				})

			})

示例

伸缩栏