在jquery中 ， 可以使用fadeIn()方法让div展开 ， 使用fadeOut()方法收缩 ， 下面小编举例讲解jquery如何实现多个DIV展开收缩 。
文章插图
需要这些哦
html+jquery
代码编纂器：Dreamweaver CS5
方式/
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()函数内 ， 获得div对象 ， 利用fadeIn()方式睁开div ， 在suo()函数内 ， 获得div对象 ， 利用fadeOut()方式缩短div 。
文章插图
6在浏览器打开test.html文件 ， 别离点击按钮 ， 查看实现的结果 。
文章插图
文章插图
文章插图
总结：1【jquery 如何实现多个DIV展开收缩】1、在test.html文件内 ， 建立多个div ， 并设置其class属性 。
2、建立两个button按钮 ， 用于触发执行js函数 。
3、别离建立睁开函数和缩短函数 ， 在睁开函数内 ， 获得div对象 ， 利用fadeIn()方式睁开div ， 在缩短函数内 ， 获得div对象 ， 利用fadeOut()方式缩短div 。
注重事项fadeIn()方式和fadeOut()方式内的秒数单元为毫秒 。
以上内容就是jquery 如何实现多个DIV展开收缩的内容啦 ， 希望对你有所帮助哦！
推荐阅读
- ZigBee模块ZM32如何实现普通自组网
- 如何关闭支付宝免密支付/自动扣款
- 如何高效进行CAN总线故障排查
- 如何使用示波器进行I2C协议的时序分析
- 如何用c语言写操作系统
- 哔哩哔哩 B站如何查看并参加正在举行的活动
- 蓝将云手机视图模式，如何安装应用
- 魔力宝贝手游殴兹那克如何进阶
- 如何把自己拍摄的视频上传到腾讯视频
- 微博如何防止异常点赞