使用CSS實現摺疊面板總結

標籤：ext   lan   lap   需要   查看   bsp   inpu   部分   注意事項   

任務目的

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

使用CSS實現摺疊面板總結