使用 css 切换 div - 显示/隐藏 div 相对于按钮的位置答案

【问题标题】：toggle div using css - show/hide div located relative position to buttons使用 css 切换 div - 显示/隐藏 div 相对于按钮的位置
【发布时间】：2020-03-01 00:12:18
【问题描述】：

三个 div，每个 div 包含父 div、一个输入和一个隐藏 div。我希望能够显示复选框后面的隐藏 div。我想在单击复选框时切换 div 显示，如果选中该复选框，我希望看到下一个 div。我写了一个 css 代码，但无论我检查哪个复选框，唯一被切换的 div 是第一个

这是html

<div class="check-btn">

    <input id="myid" type="checkbox" >
    <label for="myid" class="clicker">Click me</label>
    <div class="hiddendiv"></div>

</div>

<div class="check-btn">

    <input id="myid" type="checkbox" >
    <label for="myid" class="clicker">Click me</label>
    <div class="hiddendiv"></div>

</div>
<div class="check-btn">


    <input id="myid" type="checkbox" >
    <label for="myid" class="clicker">Click me</label>
    <div class="hiddendiv"></div>

</div>

这是css：

div input {
  margin-right: 100px;
}

.check-btn label {
  display: inline-block;
}

.check-btn input {
  display: none;
}

.clicker {
  background: green;
  padding: 5px 10px;
}

.hiddendiv {
  background: #000;
  width: 100px;
  height: 100px;
  display: none;
}

.check-btn input:checked ~ .hiddendiv {
  display: block;
}

我该怎么做才能使每个复选框都控制具有共同父级的 div。

我的代码在这里： https://codepen.io/davsev/pen/JjdJYQw

谢谢

【问题讨论】：

只是为了澄清：你想切换所有这些.hiddendiv？
如果点击第一个cb我想切换第一个.hiddendiv div，如果点击第二个cb我想切换第二个.hiddendivdiv等等
我相信可以通过Javascript来实现。你可以在代码中包含JS吗？？
不，只有 css @ManirajMurugan

标签： html css

【解决方案1】：

问题是您使用了多个id，其值必须是唯一的myid。您的每个标签都有值for="myid2，它实际上只触发已找到的第一个复选框（第一个带有id="myid" 的复选框）。

我已更新您的每个复选框以包含 id="someUniqueID" 和标签 for="someUniqueID" 以使其唯一。

工作示例：

div input {
  margin-right: 100px;
}

.check-btn label {
  display: inline-block;
}

.check-btn input {
  display: none;
}

.clicker {
  background: green;
  padding: 5px 10px;
}

.hiddendiv {
  background: #000;
  width: 100px;
  height: 100px;
  display: none;
}

.check-btn input:checked ~ .hiddendiv {
  display: block;
}

<div class="check-btn">

    <input id="myid" type="checkbox" >
    <label for="myid" class="clicker">Click me</label>
    <div class="hiddendiv"></div>

</div>

<div class="check-btn">

    <input id="myid2" type="checkbox" >
    <label for="myid2" class="clicker">Click me</label>
    <div class="hiddendiv"></div>

</div>
<div class="check-btn">


    <input id="myid3" type="checkbox" >
    <label for="myid3" class="clicker">Click me</label>
    <div class="hiddendiv"></div>

</div>

【讨论】：

【解决方案2】：

我想你几乎明白了。我尝试为每个输入分配一个唯一的 id，它起作用了：（相同的 css）

<div class="check-btn">

    <input id="myid1" type="checkbox" >
    <label for="myid1" class="clicker">Click me</label>
    <div class="hiddendiv"></div>

</div>

<div class="check-btn">

    <input id="myid2" type="checkbox" >
    <label for="myid2" class="clicker">Click me</label>
    <div class="hiddendiv"></div>

</div>
<div class="check-btn">


    <input id="myid3" type="checkbox" >
    <label for="myid3" class="clicker">Click me</label>
    <div class="hiddendiv"></div>

</div>

它被设置为第一个 myid 的 checked 值。这就是为什么它在其余部分上不起作用的原因。

【讨论】：