css - 如何编辑我的 css `toggle-slide` 以在两个不同的 div 中工作？

Question

我对仅使用 CSS 制作的 Toggle-Down 内容有疑问。我想将我的触发按钮和我的内容放在两个不同的 div 中，但我不知道使用哪个选择器。这是结构，我想要:

   <div class="row"> 
    <div class="col-md-12 button">
    <!-- My button--> 
    </div> 
    <div class="col-md-12 toggle-content">
    <!-- My content --> 
   </div>

这实际上是我的一个片段(它实际上有效，但前提是切换元素位于输入复选框旁边。

input {
  display: none;
}

label {
  cursor: pointer;
  background: grey;
}

.test {
  -webkit-transition: height .3s ease;
  height: 0;
  overflow: hidden;
  width: 200px;
  background: lightgray;
}

#check:checked+.test {
  height: 100px;
}

<label for="check">
  Click me
</label>
<input id="check" type="checkbox">
<div class="test">
  <p>Content</p>
</div>

如果您能提供帮助并告诉我选择器或任何操作，请提前致谢!祝你有美好的一天 ! =)

Answer 1

经过一番研究后，我实际上找到了一种在 CSS 中执行此操作的方法。只要元素在同一个父元素中，就可以使用 ~ 选择器来实现。它在容器内搜索同级元素。

input {
  display: none;
}

label {
  cursor: pointer;
  background: grey;
}

.test {
  -webkit-transition: height .3s ease;
  height: 0;
  overflow: hidden;
  width: 200px;
  background: lightgray;
}

#check:checked ~.test {
  height: 100px;
}

<div class="someParent">
<input id="check" type="checkbox"><label for="check">
  Click me
</label>
<hr>
<div class="test">
  <p>Content</p>
</div>
</div>