使用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

转载于:https://www.cnblogs.com/melbourne1102/p/6605370.html