小程序点击显示隐藏(点击标题,内容显示,再次点击隐藏,同时切换箭头的状态,且默认第一组的内容显示)

哈喽,大家下午好,时间过的真快,转眼啊又好长时间没写博客啦,嘿嘿最近公司比较忙,手上一直有项目需要处理,现在终于空闲了一点,赶快来一篇呀,嘿嘿~
最近我一直在做小程序的项目,其中值得一提的是项目中有一个显示隐藏的效果,听起来是很简单吧,好哒,那就是很简单吧,下面我们一起来看一下。
要实现的效果是:点击标题内容显示,再次点击隐藏,同时切换箭头的状态,且默认第一组的内容显示。
好的,那我先给大家看一下我的模板结构,和我写的假数据:

模板结构:
小程序点击显示隐藏(点击标题,内容显示,再次点击隐藏,同时切换箭头的状态,且默认第一组的内容显示)
假数据数组:
小程序点击显示隐藏(点击标题,内容显示,再次点击隐藏,同时切换箭头的状态,且默认第一组的内容显示)

现在我们来说一下,具体点击实现的思路:

1、细心的小伙伴呢,肯定已经注意到我的模板里面有一个点击事件,然后大家都知道小程序点击传参是以data-XXX的方式传的,所以在这里我传的是循环数据的下标值,以便于在点击的时候区分我们操作的到底是哪一个;
2、点击之后,我们可以在事件的形参中获取到我们传递过来的参数,下图我已经标注出来了哦;
3、然后需要注意的就是我们控制内容显示隐藏的字段我也已经写在数组里了;
4、之后就可以进行操作了,当点击的时候箭头图片是灰箭头并且hiddena字段为true的时候,也就是说隐藏的时候显示,另一种情况取反即可。

现在附上脚本代码:
小程序点击显示隐藏(点击标题,内容显示,再次点击隐藏,同时切换箭头的状态,且默认第一组的内容显示)

上效果图啊:
小程序点击显示隐藏(点击标题,内容显示,再次点击隐藏,同时切换箭头的状态,且默认第一组的内容显示)