侧边栏最小化组件

#javascript#snippets#component

需求

用js设计一个侧边栏最小化的组件。

  1. 页面右侧展示一个侧边栏，侧边栏底部有一个“收起”按钮
  2. 点击“收起”按钮，隐藏侧边栏，并展示一个小的展开按钮
  3. 点击展开按钮即可重新展示侧边栏

代码

以下是一个简单的实现侧边栏最小化的组件的 JavaScript 代码：

<!DOCTYPE html>
<html>
<head>
	<title>侧边栏最小化组件</title>
	<style>
		#sidebar {
			position: fixed;
			top: 0;
			right: 0;
			width: 200px;
			height: 100%;
			background-color: #f0f0f0;
			padding: 20px;
			transition: transform 0.3s ease-in-out;
			transform: translateX(0);
		}

		#sidebar.minimized {
			transform: translateX(100%);
		}

		#toggle-sidebar {
			position: fixed;
			top: 50%;
			right: 0;
			transform: translateY(-50%);
			background-color: #ccc;
			border: none;
			padding: 10px;
			border-radius: 50%;
			cursor: pointer;
			display: none;
		}

		#toggle-sidebar.show {
			display: block;
		}
	</style>
</head>
<body>
	<div id="sidebar">
		<h2>侧边栏标题</h2>
		<p>这里是侧边栏内容</p>
		<button id="collapse-sidebar">收起</button>
	</div>

	<button id="toggle-sidebar">展开</button>

	<script>
		const collapseButton = document.getElementById('collapse-sidebar');
		const toggleButton = document.getElementById('toggle-sidebar');
		const sidebar = document.getElementById('sidebar');

		// 添加“收起”按钮的点击事件处理程序
		collapseButton.addEventListener('click', () => {
			sidebar.classList.add('minimized');
			toggleButton.classList.add('show');
		});

		// 添加展开按钮的点击事件处理程序
		toggleButton.addEventListener('click', () => {
			sidebar.classList.remove('minimized');
			toggleButton.classList.remove('show');
		});
	</script>
</body>
</html>

DEMO

在这个例子中，我们使用了 CSS 中的 transform 属性来控制侧边栏的显示状态，使用 translateX 将侧边栏从页面右侧平移出来，使用 translateX(100%) 将其平移回去，达到隐藏的效果。同时，使用 transition 属性来为这个变换添加动画效果。

在 JavaScript 代码中，我们通过获取 #collapse-sidebar 和 #toggle-sidebar 元素的引用，分别为它们添加了点击事件的处理程序，以控制侧边栏的最小化和展开。

评论