[英]Collapse and expand elements with CSS
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. 我的约束是仅在CSS中执行此操作。
This is what I came up with so far: 这是我到目前为止提出的:
https://jsfiddle.net/Argoron/c1ypx24c/6/ 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. 我想要完成的是每个部分独立运行,这意味着例如表1应该仅在单击标题1时更改其显示状态。
Also, not sure why both alternative titles are displayed in section 3. 另外,不确定为什么两个备选标题都显示在第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. 我会建议使用checkbox
输入:checked
,而不是a
和:target
标签触发事件以来的目标将永远改变你点击另一个链接。 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. 现在,如果您不想看到复选框,则可以使用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>
Your error was in #FirstC:target + #First . 你的错误发生在#FirstC:target + #First。 Also you misspelled the selector #ThirdE 你拼错了选择器#ThirdE
https://jsfiddle.net/c1ypx24c/10/ 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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.