切换框CSS全部展开

我已经创建了一个页面，下面的代码为折叠功能所以添加问题，我只需要不断添加html和更改标题号。切换框CSS全部展开

有没有一种方法，我可以添加一个点击来展开所有按钮到这个设置？

非常感谢

CSS

<style> 
.toggle-box { 
display: none; 
} 
.toggle-box + label { 
cursor: pointer; 
display: block; 
float: left; 
font-weight: bold; 
line-height: 21px; 
margin-bottom: 10px; 
color: #000000; 
width: 99%; 
border-radius: 10px; 
border: 3px solid #006534; 
padding: 5px 5px 5px 5px; 
background: green; /* For browsers that do not support gradients */ 
background: -webkit-linear-gradient(left, white, white, #006534); /* For Safari 5.1 to 6.0 */ 
background: -o-linear-gradient(right, white, white, #006534); /* For Opera 11.1 to 12.0 */ 
background: -moz-linear-gradient(right, white, white, #006534); /* For Firefox 3.6 to 15 */ 
background: linear-gradient(to right, white, white, #006534); /* Standard syntax (must be last) */ 
} 
.toggle-box + label + div { 
display: none; 
margin-bottom: 10px; 
} 
.toggle-box:checked + label + div { 
display: block; 
} 
.toggle-box + label:before { 
background-color: #000000; 
-webkit-border-radius: 10px; 
-moz-border-radius: 10px; 
border-radius: 10px; 
color: #FFFFFF; 
content: "+"; 
display: block; 
float: left; 
font-weight: bold; 
height: 20px; 
line-height: 20px; 
margin-left: 5px; 
margin-right: 5px; 
text-align: center; 
width: 20px; 
} 
.toggle-box:checked + label:before { 
content: "\2212"; 
} 
</style>

HTML

<input class="toggle-box" type="checkbox" id="header1"> 
<label for="header1"> 
<span style="FONT-SIZE: 16px"><font color="#006534">question 1</font></span> 
</label> 
Content1 

<input class="toggle-box" type="checkbox" id="header2"> 
<label for="header2"> 
<span style="FONT-SIZE: 16px"><font color="#006534">question 2</font></span> 
</label> 
Content2

来源

2017-02-07 nsic

你可以用Javascript或jQuery轻松做到这一点。这对你来说是一种选择吗？ –

你真的只能通过CSS来改变显示器，你不能检查/取消选中的东西，所以这很接近，但并不完美。 http://codepen.io/anon/pen/wgEzjY要做到这一点，我认为你需要使用JavaScript –

案例A.#expandAll没有被选中，并点击单个项目。你有

#expandAll选中 +个人拨动检查和你希望的项目是开放的。

案例B.#expandAll检查，个别项目也被选中，并单击#expandAll，希望所有打开的项目关闭，所以你必须

#expandAll选中 +个人切换检查和您希望物品被关闭。

仅CSS无法使用。为了工作，#expandall需要检查/取消选中个别项目。他们全部。而在CSS中，你不能将多个项目作为一个事件的目标：事件被第一个目标所消耗（例如，你不能在同一个元素上有一个真正的链接（href）和检查/取消选中功能 - 单击将被其中一人消耗）。您需要javascript用于多个目标/事件。

来源

2017-02-07 23:12:41

切换框CSS全部展开

回答

相关问题