使用CSS折叠和展开元素 [英] Collapse and expand elements with CSS

问题描述

我正在尝试构建一个页面，只有标题在加载时才可见，
每个标题下方的表格在用户单击标题时在隐藏状态和显示状态之间切换。
我的约束是仅在CSS中完成此操作。

这是我到目前为止所做的：

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

它不会按照它的方式工作，因为每次点击标题时，其他标题下方的表都被隐藏。我试图完成的是每个部分的行为是独立的，这意味着例如表1应该只在标题1被点击时改变其显示状态。

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

解决方案

我会建议使用复选框 code> input和：checked 而不是 a 和：target 标签来触发事件，因为目标会一直在改变，你点击另一个链接。试试这个：



.tb {margin：10px 0;}。tb span + span，.collapsible {display：none;}。tb input tb input [type =checkbox]：checked〜span {display：none;}。tb input [type =checkbox]：check〜span + span {display：inline;}。 checked〜.collapsible {display：table;}

< div class =tb> < input type =checkbox/> <跨度>显示与LT; /跨度><跨度>隐藏< /跨度> < table class =collapsibleid =collapsible1> < TR> < td> Hello 1< / td> < / TR> < /表> < / div>< div class =tb> < input type =checkbox/> <跨度>显示与LT; /跨度><跨度>隐藏< /跨度> < table class =collapsibleid =collapsible1> < TR> < td> Hello 2< / td> < / TR> < /表> < / div>< div class =tb> < input type =checkbox/> <跨度>显示与LT; /跨度><跨度>隐藏< /跨度> < table class =collapsibleid =collapsible1> < TR> < td> Hello 3< / td> < / TR> < /表> < / div>





---

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

目前隐藏>

.tb {margin：10px 0; position：relative;} input [type =checkbox] {width：100％;身高：23px;位置：绝对;左：0; top：0;不透明度：0; z-index：10; cursor：pointer;} input [type =checkbox]：hover〜span {background：black;}。tb span {position：relative;身高：23px; line-height：23px;显示：inline-block;背景：红色;白颜色;过渡：全部.3s缓解;填充：0 10px; width：100％;}。tb span + span，.collapsible {display = none;}。tb input [type =checkbox]：checked〜span {display：none;}。 ：checked〜span + span {display：inline-block;}。tb input [type =checkbox]：checked〜.collapsible {display：table;}

< pre class =snippet-code-html lang-html prettyprint-override> < div class =tb> < input type =checkbox/> <跨度>显示与LT; /跨度><跨度>隐藏< /跨度> < table class =collapsibleid =collapsible1> < TR> < td> Hello 1< / td> < / TR> < / table>< / div>< div class =tb> < input type =checkbox/> <跨度>显示与LT; /跨度><跨度>隐藏< /跨度> < table class =collapsibleid =collapsible1> < TR> < td> Hello 2< / td> < / TR> < / table>< / div>< div class =tb> < input type =checkbox/> <跨度>显示与LT; /跨度><跨度>隐藏< /跨度> < table class =collapsibleid =collapsible1> < TR> < td> Hello 3< / td> < / TR> < / table>< / div>

a href =https://jsfiddle.net/c1ypx24c/12/ =nofollow> DemoFiddle


I'm trying to build a page where only headlines are visible when it is loaded, and the tables beneath each title toggle between hidden and displayed state when the user clicks on the title. The constraint I have is to do this in CSS only.

This is what I came up with so far:

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

It doesn't work the way it should because every time I click on a title, the tables beneath the other titles are hidden. What I'm trying to accomplish is that each section behaves independently, meaning that for example table 1 should change its display state only when title 1 is being clicked.

Also, not sure why both alternative titles are displayed in section 3.

解决方案

I will suggest use checkbox input and :checked instead of a and :target tags to trigger the event since the target will change always you click another link. Try this:

.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>

---

Now if you don't want to see the checkbox you can use CSS. Check this Snippet

.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>

Or the DemoFiddle

这篇关于使用CSS折叠和展开元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！