使用 CSS 折叠和展开元素

Question

我正在尝试构建一个加载时只有标题可见的页面，并且 当用户单击标题时，每个标题下方的表格会在隐藏和显示状态之间切换。 我的限制是只能在 CSS 中执行此操作。

这是我目前想出的：

https://jsfiddle.net/Argoron/c1ypx24c/6/

它没有按应有的方式工作，因为每次我点击一个标题时，其他标题下方的表格都被隐藏了。我想要完成的是每个部分的行为都是独立的，这意味着例如表 1 应该仅在单击标题 1 时更改其显示状态。

另外，不知道为什么在第 3 部分中显示了两个替代标题。

Answer 1

我建议使用checkbox 输入和:checked 而不是a 和: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

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;
}