折叠面板

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

 34508  184  查看评论 (7)
分享到微信朋友圈
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个参数,见注释。

希望大家的支持。

相关插件-手风琴菜单

简洁实用的jQuery手风琴插件

jquery.accdion是一款非常实用的jQuery手风琴插件。它代码简单,文件体积小,并且兼容IE8浏览器。它通过简单的设置即可以得到漂亮的手风琴图片切换效果。
  手风琴菜单
 24857  216

jQuery 手风琴插件accordion.js

可自定义宽高,图片数量,事件的手风琴插件
  手风琴菜单
 27970  269

jQuery手风琴带玻璃流光质感特效全屏导航

jQuery手风琴带玻璃流光质感特效全屏导航
  手风琴菜单
 31718  436

jQuery全屏图片点击滑动手风琴

jQuery全屏图片点击滑动手风琴是一款全屏点击轮播切换的手风琴特效。
  手风琴菜单
 25537  204

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

    祗想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
取消回复