jquery实现下拉收缩效果。

当时客户的需求是:如果这本书所读人数等于或少于12人则隐藏,反之,点击查看全部显示全部的已读本书的用户,并且下拉标识变成

                                                                    

 

 当时我的思路是:1、要实现一个可以重用的代码

         2、找关键ID,因为是要显示每本书所读的人数,通过书本的id来操作要显示的人数。

           3、查看全部标识为1,收起标识为0 都是a标签。当点击查看全部时,通过传入1 和 书本id,来进行操作。这里的ul的id和a标签和都是采用的有规律性的命名 如pimg+书本id,这样在写操作函数时,我只要传入书本id就可以操作与之对应ul下的所有用户。

 

再此之前我写了一个方法传入的ul的id能够实现一进界面就自动判断显示每本书对应的的前12位已读用户。但是点击 查看全部是就不起作用了!!!!!!!!!!代码如下:

仔细检查,发现之所以点击函数personSwitch(shortdescFlag,imgId)不起作用,是因为,在进界面时已经执行了

所以不管已读用户是否超过12位,在页面上显示的数据已经被我!截!断!了!所以我再去调用点击函数时personSwitch()的时候获取的li的个数就永远都是<=12。所以我这个方法不行!!我也想过在截取前12位数据的同时截取12后面的数据,在点击事件里将两者在合并。但是还是不行,可能我的思路是对的,但是我实现的时候方式用错了/(ㄒoㄒ)/~~

后来我从新整理了思路,变成了这样:

这次用的不是截取的思路,而是用CSS的display来实现显示隐藏。这样子就能够实现上方图片所示效果。

可能还有很多问题,如果有疑问或者指点,非常欢迎评论~~~初学者参上!!!!!

 

 

 

 

转载于:https://www.cnblogs.com/formybestlife/p/6232374.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值