JavaScript   发布时间:2022-04-16  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了原生js实现新闻列表展开/收起全文功能大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

知识要点

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

主要是对dom操作的掌握。

2.需要用到的dom操作:

parentNode 获取父级元素

nextSibling获取下一个紧跟的节点

previousSibling获取上一个紧跟的节点

3.注意事项:

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

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

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

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

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

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

以后也可以用,一劳永逸

完整代码

demo
title">Jackie吉吉

:49 来自 +niPhone 6s

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

title">王尼玛

约翰逊,为12位由儿童保护服务组织选出的孩子买圣诞节玩具,孩子们可以在80秒内...

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

大佬总结

以上是大佬教程为你收集整理的原生js实现新闻列表展开/收起全文功能全部内容,希望文章能够帮你解决原生js实现新闻列表展开/收起全文功能所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签:js展开收起
猜你在找的JavaScript相关文章
其他相关热搜词更多
phpJavaPython程序员load如何string使用参数jquery开发安装listlinuxiosandroid工具javascriptcap