jquery实现展开收起的功能

我们在制作网页的时候经常会使用到更多和收起功能，一般情况下都是后台人员去实现这个功能，本着减轻后台人员工作强度的初衷，我学习了怎样自己做出展开和收起功能的动态效果。现在小渔就为大家讲一下大概的原理。

方法/步骤

1：首先，我们需要明确自己制作的展开和收起功能应用的原理是什么，我制作的原理是，开始时控制列表的行高为定值，等我们点击展开时，列表的行高变成自动。

2：实现这个高度的切换需要我们为元素添加一个新的class样式，使得高度变成自动的。

3：我们切换这两个样式是通过jquery的class切换函数，toggleclass，确保元素的class在增加extend和去掉extend之间切换。

4：我们通过鼠标点击“更多”触发click事件，使得toggleclass函数得以运行。

5：通过以上几个步骤，我们的列表页的展开和收起功能基本上就可以实现了，但是当我们点击“更多”后，列表展开，更多应该变成收起的，事实是没有，这就需要我们进一步用函数实现更多和收起的切换。

6：我采用判断元素文本的方法来控制更多和收起的切换，用了一个简单的if else函数。

7：最后所有代码附在下图，分享给大家。

注意事项

谢绝转载，小渔辛苦原创，盗版必究

希望本文【jquery展开收起】jquery实现展开收起的功能能帮到你。