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

使用CSS折叠和展开元素

2 个答案:

或DemoFiddle