Jquery实现列表目录效果

这次来分享一个用jquery实现的一个类似于简单图文介绍的列表目录。

先设置一个开头标题heml代码，再添加一下它的css样式。

 

2.记住，写完上面的代码到js框架这个地方我们需要用到jquery插件，所以一定要先引入，否则后面打代码打着打着就忘记了。

3.这里我们创造一个方法，这个方法里面我们把一个列表的图片，标题和序号还有简介都封装在里面。（这里你想封装多少个都可以，我里面是封装了十一个的）

4.然后把那个方法名在下面这里，写一个for函数循环创造，在函数里面写一个形参，后面添加内容直接引用形参加方法里面的名称即可，这里需要用append的一个添加标签方法，选定到list的id然后在这里添加标签。

5.后面给个反引号作为添加，这样就可以不用这么麻烦那些乱码看着的代码，再把movie引用进来分别填写到四个地方后序加上封装里面的标题，序号，图片和介绍。

6.这边添加之后肯定也是要设置一下样式的，样式的代码和效果展示。

 

7.最后用一个鼠标伪类事件hover，jquery方法和this，鼠标滑到li标签的话再用查找标签的方法find，当前标签就会触发一个jquery的slideToggle上卷下拉动画效果。

 

8.下面是展示效果。

 

上面就是我所学到的jquery部分知识制作的列表单，新手上路，多多指教，如果有更好的方法或不 懂得地方欢迎在评论区教导和提问喔！