使用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