如何仅使用CSS切换Div中的效果？

Question

我尝试了所有与这个主题相关的问题和答案。此外，我还尝试了相关的问题并试图解决它，但没有成功。所以请仔细阅读我的问题。

我想要

1. 我点击“点击我”Div后，第二个“隐藏Div”显示出来。但是我想要在第二次点击“点击我”Div时，隐藏“隐藏Div”。使用纯CSS实现类似toggle事件的效果。

2. 我点击“点击我”Div后，第二个“隐藏Div”显示出来。但是如果我点击其他区域，我希望不隐藏“隐藏Div”。使用纯CSS实现这个功能。

只能使用纯CSS和CSS3来回答，不能使用（javascript、jquery）或任何其他控件。

代码

.clicker {
  width: 100px;
  height: 100px;
  background-color: blue;
  outline: none;
  cursor: pointer;
  color:#FFF;
}

.hiddendiv {
  display: none;
  height: 200px;
  background-color: green;
}

.clicker:focus+.hiddendiv {
  display: block;
}

<div>
  <div class="clicker" tabindex="1">Click me</div>
  <div class="hiddendiv"></div>
</div>

- Sumit patel

---

根据所给的要求，这是不可能的。 - Asons

我已经发布了一个答案，这是最接近的解决方法，仅使用CSS而没有表单控件。 - Asons

Answer 1

根据给定的要求，所有元素都是 div 的情况下这是不可能的。

如果您将充当链接的 div 更改为锚点 a 并使用 :target 伪类，则可以实现。

通过在锚点 a 上设置 display: inline-block，您可以像设置 div 一样调整其大小。

.clicker {
  display: inline-block;
  width: 100px;
  height: 50px;
  background-color: blue;
  color:#FFF;
}
.clicker.hidden {
  display: none;
}
.hiddendiv {
  height: 0px;
  background-color: green;
  overflow: hidden;
  transition: height 0.5s;
}
.hiddendiv.nr2 {
  background-color: red;
}

#showdiv1:target ~ div a[href="#showdiv1"],
#showdiv2:target ~ div a[href="#showdiv2"] {
  display: none;
}
#showdiv1:target ~ div a[href="#hidediv1"],
#showdiv2:target ~ div a[href="#hidediv2"] {
  display: inline-block;
}
#showdiv1:target ~ div .hiddendiv.nr1,
#showdiv2:target ~ div .hiddendiv.nr2 {
  height: 130px;
}

<div id="showdiv1"></div>
<div id="showdiv2"></div>

<div>
  <a href="#showdiv1" class="clicker" tabindex="1">Click me 1</a>
  <a href="#hidediv1" class="clicker hidden" tabindex="1">Click me 1</a>

  <a href="#showdiv2" class="clicker" tabindex="2">Click me 2</a>
  <a href="#hidediv2" class="clicker hidden" tabindex="2">Click me 2</a>

  <div class="hiddendiv nr1"></div>
  <div class="hiddendiv nr2"></div>
</div>

- Asons

---

谢谢您的回答。但是，您能帮助使div显示平滑吗？可以使用过渡效果。 - Sumit patel

Answer 2

你可以使用 checkbox 输入，根据选中或未选中显示或隐藏 div。

以下是使用相同方式的示例。

.clicker {
  width: 100px;
  height: 100px;
  background-color: blue;
  outline: none;
  cursor: pointer;
  color:#FFF;
  display:block;
}

.hiddendiv {
  display: none;
  height: 200px;
  background-color: green;
}

.clicker:focus+.hiddendiv {
  display: block;
}
.hidden{
  margin-left:-99999px;
}
input#cmn-toggle-7:checked + label + div{
 display:block;
}

<div>
  <input id="cmn-toggle-7" class="hidden" type="checkbox" >
  <label for="cmn-toggle-7" class="clicker" tabindex="1">Click me</label>
  <div class="hiddendiv"></div>
</div>

- AG_

---

谢谢您的回答。但是不使用复选框，只使用div事件切换而没有任何表单控件。 - Sumit patel

Answer 3

你可以通过勾选框和一些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 class="check-btn">

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

</div>

这里是jsfiddle

- Chiller

---

谢谢回答。但是我点击黑色的div，然后隐藏黑色的div，这是不正确的。 - Sumit patel