折叠面板

所属分类:导航-手风琴菜单

 49292  323  查看评论 (8)
分享到微信朋友圈
X
折叠面板 ie兼容8

这是一个轻量级的折叠面板插件,可用在二级菜单、多条目内容块等地方,使用也很方便

html头部部分:

<!-- css -->
<link rel="stylesheet" href="./css/main.css">
 
<!-- js -->
<script src="./js/jquery.js"></script>
<script src="./js/foldpanel.min.js"></script>

body部分:

<dl class="foldpanel" id="my-foldpanel">
        <dt>Section 1</dt>
        <dd>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam.</dd>
    <dt>Section 2</dt>
        <dd>Vestibulum a velit eu ante scelerisque vulputate.</dd>
    <dt>Section 3</dt>
        <dd>Nam mi. Proin viverra leo ut odio. Curabitur malesuada.</dd>
    <dt>Section 4</dt>
        <dd>Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc.</dd>
</dl>

然后在 <body></body>标签前调用该插件即可:

<script type="text/javascript">
$(function(){
    $('dl#my-foldpanel').foldpanel({
        init: true,     // 初始第一个展开, 默认为 true
        time: 400,      // panel展开动画时间, 默认为 300ms
        dbclose: true,      // 在此点击关闭, 默认为 true
    });
})
</script>

现在这个版本可以传3个参数,见注释。

希望大家的支持。

相关插件-手风琴菜单

实用的Accordion手风琴js特效

实用的Accordion手风琴js特效
  手风琴菜单
 43728  439

bootstrap垂直手风琴动画特效

一款基于Bootstrap的垂直手风琴特效。该垂直手风琴特效基于原生的Bootstrap Accordion组件来制作,通过CSS3来对它进行美化,效果美观大方。
  手风琴菜单
 35833  365

jquery手风琴折叠式

多级菜单 JS 手风琴
  手风琴菜单
 40161  340

jQuery实现accordion 菜单伸缩效果

一款漂亮的手风琴效果
  手风琴菜单
 45602  438

讨论这个项目(8)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    躬自厚而薄责于人 0
    2020/7/16 9:25:48
    优化后的插件地址:http://www.jq22.com/jquery-info23218
    非常感谢原作者的开发,代码很优雅,学习到了很多。 回复
    祗想TT快乐 0
    2017/7/20 14:14:04

    这个有问题啊,多点几次的时候,弹不出来

        躬自厚而薄责于人0
        2020/7/11 9:55:20
        确实,这个原版的有bug,我后来尝试修复了。
        可以通过这个链接,下载优化后的版本
        https://jww.lanzous.com/iQd7hei66la

        /**
        * @author: 夏2同学
        * @time: 2020年7月10日20:52:14
        * @version: v0.0.1
        * @basic:https://www.jq22.com/jquery-info1968
        * @old_author:Arron.y
        * 优化的点:
        * 1. 原来加载的时候有一瞬间的左侧晃动(已干掉)
        * 2. 增加初始化位置,不在只能单一的初始化第一个
        * 3. 修复了多点几次的时候,弹不出来的情况
        * (错误原因:hide的时候没有将data.flag 设置为false)
        */
    回复
    jimmy88551 0
    2016/11/25 14:11:08
    老狼 0
    2016/7/24 22:07:40
    有BUG 点击下一个上一个不会隐藏,必须要点两下上一个才能隐藏 回复
    汉斯 0
    2016/3/31 14:03:06
    密巴巴客服 0
    2016/3/22 14:03:43
    间隔点击时,有问题,不能及时弹出 回复
    隐士湖 0
    2015/12/30 10:12:01
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复