地址 CSS 通用兄弟选择器和输入：选中

【问题标题】：Address CSS general sibling selector and input:checked地址 CSS 通用兄弟选择器和输入：选中
【发布时间】：2022-01-25 15:33:36
【问题描述】：

我试图解决这样定义的样式：

标题输入[type=checkbox] ~ div#example {max-height:0px;}

header input[type=checkbox]:checked ~ div#example {max-height:100px;}

我想做类似的事情

document.getElementById('example').style.maxHeight='10px';

但它应该只更改

input[type=checkbox]:checked

而不是未选中的版本。

也许 nextElementSibling 有办法？感谢您的帮助！

【问题讨论】：

标签： javascript css css-selectors

【解决方案1】：

当输入从 unchecked 变为 checked 和 vv 时，您可以重置 maxWidth。

document.querySelector('header input[type=checkbox]').addEventListener('change', function(event) {

  document.getElementById('example').style.maxHeight = event.target.checked ? '10px' : '0px';
});

header input[type=checkbox]~div#example {
  max-height: 0px;
}

header input[type=checkbox]:checked~div#example {
  max-height: 100px;
}

<header>
  <input type="checkbox">
  <div id="example"></div>
</header>

【讨论】：