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

Uxrieg 发表于 Dev

乌克斯里格

我对仅用 CSS 制作的切换内容有问题。我想把我的触发按钮和我的内容放在两个不同的 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>

如果您能提供帮助并告诉我什么选择器或要做什么，在此先非常感谢！祝你有美好的一天！=)

马哈库斯

经过一番挖掘，我实际上找到了一种在 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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。