Html 控制面板内容可见性的面板标题中的复选框？

我在面板标题中有一个复选框，我想显示该面板

<div class='panel'>
    <div class='panel-header'> 
        <label for='check1'>
            <input id='check1' type='checkbox' value='on'>
            Checkbox Label
        </label>
    </div>
    <div class='panel-content'>
    </div>
</div>

复选框标签

---

我似乎无法构建一个选择器来选择

.panel content

，并使其仅在选中

#check1

时可见。我需要能够选择元素

.panel

的子

.panel content

，其中

.panel

有一个已检查的子输入。

这是一个正在工作的JSFIDLE：

我希望这就是你想要实现的

首先：我添加了一个JS侦听器：

document.addEventListener('DOMContentLoaded', function () {
      document.querySelector('#check1').addEventListener('change', reactToCheckbox);
});

秒：每次侦听器响应复选框中的更改时，更改

面板内容
的
id
：

function reactToCheckbox(){
   if(check1.checked){
        var element = document.getElementById("panel-content").id = 'panel-content-show';           return false;
   }
   else{
      var element = document.getElementById("panel-content-show").id = 'panel-content';             return false;
   }
};

希望这有帮助，否则祝你好运。
检查此项；）

工作：

使用纯CSS实现这一点的唯一方法是通过删除
复选框
包装器
div.panel-header
并在
标签
之外更改HTML，只要您有
for=“”
标签中的属性，以便
复选框
与
div.pnael-content
处于同一级别，而不是更深的嵌套



。面板内容{
显示：无；
填充物：5px；
背景：天蓝色；
}
#检查1：已检查~面板内容{
显示：块；
}

复选框标签
Lorem ipsum dolor sit amet，奉献精英。这是一种精神上的疾病，是一种精神上的疾病，是一种精神上的疾病！福氏无柄无柄无柄无柄无柄无柄无柄无柄无柄无柄无柄无柄无柄无柄无柄无柄无柄无柄无柄无柄无柄无柄无柄无柄无柄无柄无柄无柄无柄无柄无柄无柄无柄。
我认为这行不通，因为.panel内容既不是要检查的兄弟，也不是要检查的孩子。是否可以重写html结构或使用javascript？
$("#check1").on("change",function(){
   var panelContent = $(this).parent().parent().parent().children(".panel-content");
   if(this.checked) {
       $(panelContent).show();
   }else{
       $(panelContent).hide();
   }
});

// Get #check1 .panel-content
var panelCheckbox = $(".panel").children(".panel-header").children("label").children("#check1");
var panelContent;
if($(panelCheckbox).prop("checked") = true){
   panelContent = $(panelCheckbox).parent().parent().parent().children(".panel-content");
}