原生js实现侧边栏的展开和收回

最新推荐文章于 2026-06-15 15:47:35 发布

原创最新推荐文章于 2026-06-15 15:47:35 发布 · 2.2k 阅读

8 ·

本内容遵循CC 4.0 BY-SA版权协议

html，css，js小知识专栏收录该内容

11 篇文章

订阅专栏

该博客详细介绍了如何使用原生JavaScript实现侧边栏的展开和收回功能。通过设置定时器以及利用奇偶性控制变量a，达到动态切换侧边栏状态的默认关闭效果。读者可以通过复制代码亲自体验这一交互效果。

需求：用原生js实现侧边栏的展开和收回，用定时器实现，用常数a的奇偶来判断是展开还是收回（默认收回）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		#div1 {
			width: 200px;
			height: 400px;
			left: -200px;
			position: absolute;
			background-color: hotpink;
		}
		#span {
			width: 20px;
			position: absolute;
			right: -20px;
			top: 160px;
			background-color: orange;
		}
	</style>

	<body>
		<div id="div1">
			<span id="span">分享到</span>
		</div>
	</body>
	
	<script type="text/javascript">
		var oDiv = document.getElementById('div1');
		var span = document.getElementById('span');
		var a = 0;
		//定义变量a，点击开启或关闭后a加一，用奇偶数的变换来判断是改开还是改关。
		span.onclick = function() {
			if(a % 2 == 0) {
				open();
				a++;
			} else {
				close();
				a++;
			}
		}
		var timer = null;
		function open() {
			clearInterval(timer);
			timer = setInterval(function() {
				if(oDiv.offsetLeft == 0) {
					clearInterval(timer);
				} else {
					oDiv.style.left = oDiv.offsetLeft + 10 + 'px';
				}
			}, 30);
		}
		function close() {
			clearInterval(timer);
			timer = setInterval(function() {
				if(oDiv.offsetLeft == -200) {
					clearInterval(timer);
				} else {
					oDiv.style.left = oDiv.offsetLeft - 10 + 'px';
				}
			}, 30);
		}
	</script>
</html>