微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

原生js实现新闻列表展开/收起全文功能

知识要点

1.实现原理很简单,通过点击a标签设置div的display属性隐藏或者显示

主要是对dom操作的掌握。

2.需要用到的dom操作:

parentNode 获取父级元素

nextSibling获取一个紧跟的节点

prevIoUsSibling获取一个紧跟的节点

3.注意事项:

要考虑到当点击展开全文的时候,其他已经展开的全文要收起来。

当用nextSibling获取一个节点时候,不同浏览器的判断是不一样的

有的是获取元素,有的获取换行符或者空格,所以这里就要用到nodeType来判断一下数据类型nodeType只返回数字1、2、3

只有返回1的时候获取的才是元素节点

(我特么做的时候没考虑到这个问题,还以为哪出毛病了搞了好久)

还有就是由于js里没有像jquery里获取同级所有元素的dom操作,所以我自己写了个siblings(elm)

以后也可以用,一劳永逸

完整代码

rush:xhtml;"> demo

<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">收起全文

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持编程之家!

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐