使用复选框来切换折叠菜单可以通过以下步骤实现:
<input type="checkbox" id="menu-toggle">
<label for="menu-toggle">Toggle Menu</label>
<div id="menu-content">
<!-- 折叠菜单内容 -->
</div>
#menu-toggle {
display: none; /* 隐藏复选框 */
}
#menu-content {
display: none; /* 初始状态下隐藏菜单内容 */
}
#menu-toggle:checked ~ #menu-content {
display: block; /* 复选框选中时显示菜单内容 */
}
var menuToggle = document.getElementById('menu-toggle');
var menuContent = document.getElementById('menu-content');
menuToggle.addEventListener('change', function() {
if (menuToggle.checked) {
menuContent.style.display = 'block'; // 复选框选中时显示菜单内容
} else {
menuContent.style.display = 'none'; // 复选框取消选中时隐藏菜单内容
}
});
这样,当复选框被选中时,折叠菜单内容会显示出来;当复选框取消选中时,折叠菜单内容会隐藏起来。通过这种方式,可以实现使用复选框来切换折叠菜单的效果。
腾讯云相关产品推荐:无
领取专属 10元无门槛券
手把手带您无忧上云