切換框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全部展開

回答

相關問題