如何使用复选框而仅使用该复选框来切换折叠菜单？

<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'; // 复选框取消选中时隐藏菜单内容
  }
});