使用CSS折叠和展开元素

Question

我在尝试构建一个页面，当页面被加载时，只有标题可见，当用户点击标题时，每个标题下面的表格就会在隐藏和显示之间切换。我的限制是只使用CSS来实现。

到目前为止，这是我想出的代码：https://jsfiddle.net/Argoron/c1ypx24c/6/它不起作用因为每次我点击一个标题，其他标题下的表格都会被隐藏。我想要实现的是每个部分都可以独立地运行，例如：只有当点击标题1时，表格1才会改变其显示状态。

另外，在第3个部分中，不确定为什么两个备选标题都显示出来了。

- Argoron

---

由于您将 #ThirdE 拼错成 #thirdE，因此在第3节中显示了两个备选标题。请注意小写字母“t”。 - Weinz

@Weinz - 发现得好，完全没注意到。谢谢！ - Argoron

Answer 1

我建议使用复选框输入和:checked替代和:target标签来触发事件，因为每次单击另一个链接时目标都会更改。请尝试如下操作：

.tb {
    margin:10px 0;
}
.tb span+span, .collapsible {
    display:none;
}
.tb input[type="checkbox"]:checked ~ span {
    display:none;
}
.tb input[type="checkbox"]:checked ~ span+span{
    display:inline;
}
.tb input[type="checkbox"]:checked ~ .collapsible {
    display:table;
}

<div class="tb">
    <input type="checkbox"/>
    <span>Show</span><span>Hide</span>
    <table class="collapsible" id="collapsible1">
        <tr>
            <td>Hello 1</td>
        </tr>   
    </table>    
</div>
<div class="tb">
    <input type="checkbox"/>
    <span>Show</span><span>Hide</span>
    <table class="collapsible" id="collapsible1">
        <tr>
            <td>Hello 2</td>
        </tr>   
    </table>    
</div>
<div class="tb">
    <input type="checkbox"/>
    <span>Show</span><span>Hide</span>
    <table class="collapsible" id="collapsible1">
        <tr>
            <td>Hello 3</td>
        </tr>   
    </table>    
</div>

现在，如果您不想看到复选框，可以使用CSS。请查看此代码片段。

.tb {
  margin: 10px 0;
  position: relative;
}
input[type="checkbox"] {
  width: 100%;
  height: 23px;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  z-index: 10;
  cursor: pointer;
}
input[type="checkbox"]:hover ~ span {
  background: black;
}
.tb span {
  position: relative;
  height: 23px;
  line-height: 23px;
  display: inline-block;
  background: red;
  color: white;
  transition: all .3s ease;
  padding: 0 10px;
  width: 100%;
}
.tb span+span,
.collapsible {
  display: none;
}
.tb input[type="checkbox"]:checked ~ span {
  display: none;
}
.tb input[type="checkbox"]:checked ~ span+span {
  display: inline-block;
}
.tb input[type="checkbox"]:checked ~ .collapsible {
  display: table;
}

<div class="tb">
  <input type="checkbox" />
  <span>Show</span><span>Hide</span>
  <table class="collapsible" id="collapsible1">
    <tr>
      <td>Hello 1</td>
    </tr>
  </table>
</div>
<div class="tb">
  <input type="checkbox" />
  <span>Show</span><span>Hide</span>
  <table class="collapsible" id="collapsible1">
    <tr>
      <td>Hello 2</td>
    </tr>
  </table>
</div>
<div class="tb">
  <input type="checkbox" />
  <span>Show</span><span>Hide</span>
  <table class="collapsible" id="collapsible1">
    <tr>
      <td>Hello 3</td>
    </tr>
  </table>
</div>

或者DemoFiddle演示

- DaniP

---

所以你不能添加任何额外的元素吗？@Argoron，这样你发布的代码和:target将不可能实现。 - DaniP

我可以添加额外的元素，但条件是它们在视觉上不能与当前的“标题”元素有太大的差异，因为我正在处理的页面是一个预定义的“外观和感觉”图表模型。实际的标题元素看起来像一个“平面”按钮，有点像 Stackoverflow 按钮，没有阴影和圆角。 - Argoron

那么，问题是什么？用CSS样式化它...检查我的第二个片段或Fiddle @Argoron。 - DaniP

如果复选框位于“td”上，而其他项不在同一级别，则无法使用CSS，因为没有父选择器。 - DaniP

你所需要的只是爱！！！ 你提供了一个美丽的完全基于CSS动画的下拉菜单的基础。 谢谢！ - Samuel Ramzan

Answer 2

你的错误在于 #FirstC:target + #First。另外，你拼错了选择器 #ThirdE。

https://jsfiddle.net/c1ypx24c/10/

table.collapsible {
    display: none;
}

#FirstE, #SecondE, #ThirdE {
    display: none;
}

#FirstC:target ~ #FirstE,
#SecondC:target ~ #SecondE,
#ThirdC:target ~ #ThirdE{
    display: inline;
}

#FirstC:target, 
#SecondC:target,
#ThirdC:target{
    display: none;
}

#FirstC:target ~ #collapsible1, 
#SecondC:target ~ #collapsible2,
#ThirdC:target ~ #collapsible3{
    display: inline;
}

- Weinz

---

不幸的是，这仍然无法实现我想要完成的目标，即点击只影响同一部分的表格。例如，当我点击标题1时，表格1会展开，但当我接下来点击标题2时，表格1又被隐藏了，尽管它应该保持可见。 - Argoron