知识要点
1.实现原理很简单,通过点击a标签设置div的display属性隐藏或者显示,
主要是对dom操作的掌握。
2.需要用到的dom操作:
parentNode 获取父级元素
nextSibling获取下一个紧跟的节点
3.注意事项:
要考虑到当点击展开全文的时候,其他已经展开的全文要收起来。
当用nextSibling获取下一个节点时候,不同浏览器的判断是不一样的
有的是获取元素,有的获取换行符或者空格,所以这里就要用到nodeType来判断一下数据类型nodeType只返回数字1、2、3
只有返回1的时候获取的才是元素节点
(我特么做的时候没考虑到这个问题,还以为哪出毛病了搞了好久)
还有就是由于js里没有像jquery里获取同级所有元素的dom操作,所以我自己写了个siblings(elm)
以后也可以用,一劳永逸
完整代码
<div id="list0">
<p class="title">高晓松
<p class="time">44分钟前 来自 微博 weibo.com
<p class="zy">波澜壮阔的独立斗争,风起云涌的解放运动,卡斯特罗泼墨挥毫一人写就半部古巴史。戴名表开豪车上名校,亲美富二代卡斯特罗早早走上革命之路竟是由基因决定?艳福不浅,老卡又如何能在有生之年睡完传闻中的35000个女人?高晓松用数据还原真实的古巴,看今日...<a class="show" href="#">展开全文
<div class="content">波澜壮阔的独立斗争,风起云涌的解放运动,卡斯特罗泼墨挥毫一人写就半部古巴史。戴名表开豪车上名校,亲美富二代卡斯特罗早早走上革命之路竟是由基因决定?艳福不浅,老卡又如何能在有生之年睡完传闻中的35000个女人?高晓松用数据还原真实的古巴,看今日的它究竟是落后贫穷还是盛世繁华:L晓松奇谈之革命领袖卡斯特罗的传奇一生
<a href="#" class="hidd">收起全文