有关列表折叠展开的问题

最新推荐文章于 2024-05-20 09:47:42 发布

schurmi

最新推荐文章于 2024-05-20 09:47:42 发布

阅读量642

点赞数

本文链接：https://blog.csdn.net/helloschurmi/article/details/89946773

版权

在有列表展开的页面，实现列表展开折叠效果，最常用的就是获取列表的索引值（列表从后台获取数据，利用循环渲染到前端），通过点击事件获取当前的索引值与循环产生的索引值比对，看是否匹配，匹配则展开，否则不展开，或者不匹配索引值，匹配其他关键值也可以，总之就是点击事件获取到的关键值同列表某一项匹配就展开。

这只是其中一种展示方法，特点是所有列表只有一项是展开的，点击事件触发时只有一项列表与之匹配。如果每个列表点击事件都是独立的，列表展开都是独立的要如何解决呢？

首先说下原理，其实原理很简单，就是点击事件获取列表项的其中一个属性(例如对象列表有一个属性叫isShow)通过修改属性值，在渲染到前端时判断属性值条件是否满足折叠或者展示，因为属性是独立设置的因此可以独立点击折叠展开

在对象列表添加新属性isShow

 tempBox2 = [...tempBox, ...tempLsit].map((item)=>{
          return Object.assign(item,{isShow:false})
        })

渲染到前端时判断isShow的值来展开或者折叠，点击事件修改isShow的值让其折叠或者展开

关注