1、新建一个html文件,命名为test.html,用于讲解jquery如何实现多个DIV展开收缩。
2、在test.html文件内,使用div标签创建三行文字,并设置它们的class属性为mdiv。
3、在css标签内,通过元素名称设置div的样式,设置其宽度和高度为100px,背景颜色为红色,下边距为20px。
4、在test.html文件内,创建两个按钮,一个展开按钮,另一个收缩按钮,并给它们绑定onclick事件,用于触发执行js函数zkai()和suo()。
5、在js标签内,分别创建zkai()函数和suo函数,在zkai()函数内,获得di箪滹埘麽v对象,使用fadeIn()方法展开div,在suo()函数内,获得div对象,使用fadeOut()方法收缩div。
6、在浏览器打开test.html文件,分别点击按钮,查看实现的效果。