首页 > 软件开发 > JQUERY >

jquery实现手风琴效果

来源:互联网 2023-03-16 23:53:57 版权归原作者所有,如有侵权,请联系我们

手风琴效果是一种常见的效果,如何利用jquery实现手风琴效果,主要是用到了silde属性pQh办公区 - 实用经验教程分享!

工具/原料

  • DW2017

方法/步骤

  • 1

    首先创建一个div,内含一张图片,再创建一个p标签,作为按钮。pQh办公区 - 实用经验教程分享!

    jquery实现手风琴效果pQh办公区 - 实用经验教程分享!

  • 2

    设置div中的元素为隐藏,以及一些简单的css效果pQh办公区 - 实用经验教程分享!

    jquery实现手风琴效果pQh办公区 - 实用经验教程分享!

  • 3

    点击运行,预览效果如下图所示:pQh办公区 - 实用经验教程分享!

    jquery实现手风琴效果pQh办公区 - 实用经验教程分享!

  • 4

    利用jquery的slide属性实现手风琴效果,slide有三种方法:slideDown()、slideUp()、slideToggle(),这里用到的是slideToggle()方法。pQh办公区 - 实用经验教程分享!

    1、如果元素向下滑动,则slideToggle()可向上滑动,反之,向下滑动pQh办公区 - 实用经验教程分享!

    pQh办公区 - 实用经验教程分享!

    pQh办公区 - 实用经验教程分享!

    jquery实现手风琴效果pQh办公区 - 实用经验教程分享!

  • 4
  • 5

    设置完成后,点击运行,可以看到下图所示的最终效果pQh办公区 - 实用经验教程分享!

    jquery实现手风琴效果pQh办公区 - 实用经验教程分享!

  • 以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!pQh办公区 - 实用经验教程分享!


    标签: JQUERY手风琴HTML

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号