Question

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

<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-content的子.panel，其中.panel具有已检查的子输入。

Answer 1

检查一下;）
工作：JSFiddle

$("#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");
}

Answer 2

这是一个有效的jsfiddle：https://jsfiddle.net/o16v3a5j/3/

我希望这是你想要实现的目标吗？

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

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

每次听众响应复选框中的更改时，

更改panel-content的{{1}}：

id

希望有所帮助，否则祝你好运。

Answer 3

使用纯CSS实现此目的的唯一方法是删除checkbox包装div.panel-header以及label以外的更改HTML，只要您在label 中拥有input属性，我就需要在for=""周围包裹label，以便checkbox位于与div.pnael-content相同的级别，而不是更深的嵌套。

JS Fiddle

.panel-content { display: none; padding: 5px; background: skyblue; } #check1:checked ~ .panel-content { display: block; }

<div class='panel'> <div class='panel-header'></div> <input id='check1' type='checkbox' checked> <label for='check1'>Checkbox Label</label> <div class='panel-content'> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium quis nesciunt et, maiores sint voluptatum enim earum non illum temporibus velit reprehenderit dignissimos cum minima! Voluptatem voluptas delectus fugiat molestiae. </div> </div>

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

3 个答案: