Html 当我将复选框位置移动到导航栏时，隐藏和显示侧边栏不起作用

在这个演示中，我使用

checkbox

分别隐藏和显示侧边栏，将内容移动到左侧，但我的问题是，当我将

checkbox

从当前位置更改为导航栏时，它不起作用。请帮帮我

index.html 正如@Sumit所写的：

---

它不起作用，因为您已经编写了输入：checked~.portfolio。CSS不能向上选择，您需要jQuery或JS来完成此操作

您可以使用以下jQuery代码：

$("#slide-sidebar").change(function() {
  $(".sidebar-left").toggleClass("show");
});

这个CSS代码：

.sidebar-left.show {
  padding-left: 0px;
  padding-right: 0px;
  margin-right: 0px;
  width: 0px;
  -moz-transition: width 0.5s ease, padding 0.5s ease;
  transition: width 0.5s ease, padding 0.5s ease;
}

---

.

它不起作用，因为您编写了

input:checked~.portfolio

。CSS无法向上选择，您需要jQuery或JS来完成此操作。是的，但请给我一些想法（使用jQuery）或提供一些有用的链接，以便我可以阅读和编辑implement@tusharbalar我很高兴它有帮助，但请避免写没有建设性的评论，这对其他访客没有帮助。考虑删除你的评论。

$("#slide-sidebar").change(function() {
  $(".sidebar-left").toggleClass("show");
});

.sidebar-left.show {
  padding-left: 0px;
  padding-right: 0px;
  margin-right: 0px;
  width: 0px;
  -moz-transition: width 0.5s ease, padding 0.5s ease;
  transition: width 0.5s ease, padding 0.5s ease;
}