js多个展开与收起内容实现

时间:2021-10-28 来源:未知网络 作者:996建站网

在有的网页上,比如很多论坛上我们会看到很多文章摘要概述列表,点开按钮后会展开全文,点击收起按钮会收起全文显示摘要。

js多个展开与收起内容实现插图<img data-rawwidth="919" data-rawheight="1181" src="data:image/svg+xml;utf8,” class=”origin_image zh-lightbox-thumb lazy” width=”919″ data-original=”https://pic3.zhimg.com/v2-a90bb8347cdffebd9c0e759c77a3846e_r.jpg” data-actualsrc=”/wp-content/uploads/2021/10/https://www.00996.cn/wp-content/uploads/2021/10/20211028135204-617aab04c77c6.jpg”/>
这个功能如何实现呢?我思考了下思路如下我们可以先实现其中某一个内容的展开与收起,具体思路就是定义两个相邻的兄弟p标签一个放全文一个放摘要,每个里面有个子按钮一个是收起,一个是展开html结构如下

js多个展开与收起内容实现插图1<img data-rawwidth="1224" data-rawheight="694" src="data:image/svg+xml;utf8,” class=”origin_image zh-lightbox-thumb lazy” width=”1224″ data-original=”https://pic3.zhimg.com/v2-07d34bf402d51de75a6404e7b13e321e_r.jpg” data-actualsrc=”/wp-content/uploads/2021/10/https://www.00996.cn/wp-content/uploads/2021/10/20211028135204-617aab04c77c6.jpg”/>
当点击view里面的expand按钮时把view隐藏掉,把hidden显示出来,当点击hidden里面的收起时,把hidden隐藏把view显示出来。
当panel有多个时,我们想实现点击展开,把其他panel里面的全文收起,把自身的全文展开,这个应该怎么办呢?这个功能就比较复杂请看代码

js多个展开与收起内容实现插图2<img data-rawwidth="1242" data-rawheight="985" src="data:image/svg+xml;utf8,” class=”origin_image zh-lightbox-thumb lazy” width=”1242″ data-original=”https://pic3.zhimg.com/v2-f5c9e9b5345e70e44885be3d1b6a411e_r.jpg” data-actualsrc=”/wp-content/uploads/2021/10/https://www.00996.cn/wp-content/uploads/2021/10/20211028135204-617aab04c77c6.jpg”/>
首先声明展开与收起函数。
这个showAll会根据当前按钮层级关系寻找同一panel下的view hidden把全文展开,把概要隐藏。
hideAll会隐藏全文,把概要显示出来。
下面我们要做的就是把这两个函数绑定到按钮的onclick事件上。
我们用一个for循环实现给每个panel下的按钮绑定事件。

js多个展开与收起内容实现插图3<img data-rawwidth="1217" data-rawheight="1523" src="data:image/svg+xml;utf8,” class=”origin_image zh-lightbox-thumb lazy” width=”1217″ data-original=”https://pic3.zhimg.com/v2-a523c0fa136983cd5c55c5833f8c2d32_r.jpg” data-actualsrc=”/wp-content/uploads/2021/10/https://www.00996.cn/wp-content/uploads/2021/10/20211028135204-617aab04c77c6.jpg”/>
注意我们在一个for循环中嵌套了一个for循环用于实现在展开点击的panel时,将其他panel下的内容收起,在里面的循环中call用来用当前循环的元素代替this,将作用域上下文进行修改。
如果我们把里面的文章内容换成按钮菜单,这样就可以实现菜单点击展开与收起的功能。可以用于侧栏导航。

js多个展开与收起内容实现插图4

微信扫一扫 关注公众号

微信扫一扫 使用小程序

百度扫一扫 使用小程序