css html折叠面板,使用CSS实现折叠面板总结

任务目的

深入理解html中radio的特性

深入理解CSS选择器以及伪元素的使用

任务描述

使用input的radio单选框特性结合CSS中的伪元素实现bootstrap中折叠面板(点击查看样例)，要求样式一致。

任务注意事项

当其中一个面对折叠时，其他面板需要隐藏

只能使用HTML，CSS，不允许使用JavaScript

注意测试不同情况，尤其是极端情况下的效果

有能力的同学在面板折叠或者展开时添加动画效果

参考资料

MDN label: 了解html中label的基本知识

使用CSS实现折叠面板总结

1、CSS3 :target Selector

当浏览器地址里的hash(地址里#号后面的部分)和:target伪选择器指定的ID匹配上时，它的样式就会在这个ID元素上生效。

eg：Link 1

Content to Link 1

Hello World!

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、已提交作业

原文：http://www.cnblogs.com/melbourne1102/p/6605370.html