任务目的
深入理解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、已提交作业