使用CSS實現折疊面板總結

任務目的

1. 深入理解html中radio的特性
2. 深入理解CSS選擇器以及偽元素的使用

任務描述

1. 使用input的radio單選框特性結合CSS中的偽元素實現bootstrap中折疊面板(點擊查看樣例)，要求樣式一致。

任務注意事項

1. 當其中一個面對折疊時，其他面板需要隱藏
2. 只能使用HTML，CSS，不允許使用JavaScript
3. 注意測試不同情況，尤其是極端情況下的效果
4. 有能力的同學在面板折疊或者展開時添加動畫效果

參考資料

1. MDN label: 了解html中label的基本知識

MDN Adjacent sibling selectors: 了解CSS中的兄弟相鄰選擇器

 

使用CSS實現折疊面板總結

1、CSS3 :target Selector

當瀏覽器地址里的hash(地址里#號后面的部分)和:target偽選擇器指定的ID匹配上時，它的樣式就會在這個ID元素上生效。

eg：<a href="#link1">Link 1</a>  

<div id="link1">

  <h3>Content to Link 1</h3>

  <p>Hello World!</p>

</div>

div {

    display: none;

}

div:target {

    display: block;

}

2、HTML DOM nextSibling Property

nextSibling屬性返回在DOM樹同級上，緊跟指定節點之后的節點。返回值為一個Node對象。

nextSibling與nextElementSibling區別為，nextSibling返回相鄰的元素節點、文本節點或者評論節點，nextElementSibling返回相鄰元素節點（不包括文本節點和評論節點）。

此屬性為只讀屬性。

注意：使用previousSibling屬性，返回制定節點DOM樹同級上，之前節點。使用childNodes屬性，返回指定節點的子節點。

語法：

node.nextSibling

返回值：節點對象，代表node節點相鄰的下一個節點，如果沒有下一個節點返回null。

3、已提交作業

代碼地址https://github.com/Nunawading2016/2017-IFE-Baidu/blob/master/task4-4

預覽地址http://htmlpreview.github.io/?https://github.com/Nunawading2016/2017-IFE-Baidu/blob/master/task4-4/index.html