微信小程序点击展开收起（点谁谁展开/收起）

最新推荐文章于 2025-09-25 11:56:56 发布

原创最新推荐文章于 2025-09-25 11:56:56 发布 · 3.9k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #javascript #前端 #小程序 #html5

小知识同时被 2 个专栏收录

43 篇文章

订阅专栏

微信小程序

17 篇文章

订阅专栏

本文介绍如何在微信小程序中实现点击元素后，相应内容区域动态展开或收起的效果，涉及HTML页面和JS页面的相关交互逻辑。

在这里插入图片描述
HTML页面

<view class="listItem-div"> 
   <view>作业截止日期：{{item.fiel_time}}
        <view class="more" data-index="{{index}}" wx:if='{{!item.zhankai}}' bindtap="zhankai">展开</view>
        <view class="more" data-index="{{index}}" wx:if='{{item.zhankai}}' bindtap="shouqi">收起</view>
    </view>
    <view class="listItem-bottom" data-index="{{index}}" bindtap="jobClick">作业要求</view>
</view>
<view class="more_content" wx:if='{{item.zhankai}}'>
    <view class="grade">成绩：</view>
    <view class="grade_cont">{{item.evaluate}}</view>
    <view class="grade">评语：</view>
    <view class="grade_cont">{{item.content}}</view>
</view>

JS页面

// 已有成绩 点击展开
    zhankai:function(e){
        // console.log(e);
        let zk = e.currentTarget.dataset.index
        // console.log(zk);
        let list=this.data.list;
        // console.log(list);
        //变换其打开、关闭的状态
        list[zk].zhankai = !list[zk].zhankai || false;
        this.setData({
            list
        })
        
    },
    // 点击收起
    shouqi:function(e){
        // console.log(e);
        let zk = e.currentTarget.dataset.index
        // console.log(zk);
        let list=this.data.list;
        //变换其打开、关闭的状态
        list[zk].zhankai = false || !list[zk].zhankai;
        this.setData({
            list
        })
    },