最新资源
简介
BeefUp是一个轻量级、响应迅速的jQuery手风琴插件，它允许您通过以下功能切换Html元素的可见性：
特征：
- 一页纸上有多个手风琴。
- 可到达的
- 通过JS或CSS切换Html元素。
- 带有嵌套Html元素的多级手风琴。
- 淡入淡出或滑动动画。
- 回拨支持。
基本用法：
1.在文档底部包含最新版本的jQuery库和jQuery增强插件。
- <script src="/path/to/cdn/jquery.min.js"></script>
- <script src="jquery.beefup.js"></script>
2.创建一个简单的手风琴，使用简单的Html结构。
- <article class="demo">
- <h2 class="beefup-head">Accordion Header</h2>
- <div class="beefup-body">
- <p>Accordion Body</p>
- </div>
- </article>
3.使用默认选项调用插件。
- $('.demo').beefup();
4.根据你的喜好设计手风琴。
- .beefup-head {
- cursor: pointer;
- position: relative;
- }
- .beefup-head:after {
- border-style: solid;
- border-width: 12px 12px 0 12px;
- border-color: #ddd transparent transparent transparent;
- content: '';
- position: absolute;
- right: 0;
- height: 0;
- margin-top: -6px;
- top: 50%;
- width: 0;
- }
- .open > .beefup-head:after {
- border-width: 0 12px 12px 12px;
- border-color: transparent transparent #ddd transparent;
- }
5.可用选项和默认值。
- $('.demo').beefup({
- // Boolean: Enable accessibility features like tab control
- accessibility: true,
- // String: Name of the trigger element
- trigger: '.beefup__head',
- // String: Name of the collapsible content
- content: '.beefup__body',
- // String: Name of the class which shows if a accordion is triggered or not
- openClass: 'is-open',
- // String: Set animation type to "slide", "fade" or leave empty ""
- animation: 'slide',
- // Integer: Set the speed of the open animation
- openSpeed: 200,
- // Integer: Set the speed of the close animation
- closeSpeed: 200,
- // Boolean: Scroll to accordion
- scroll: false,
- // Integer: Set the speed of the scroll feature
- scrollSpeed: 400,
- // Integer: Additional offset to accordion position
- scrollOffset: 0,
- // Boolean: Open just one accordion at once
- openSingle: false,
- // Mixed: Leave one item open, accepts null, integer or string
- stayOpen: null,
- // Boolean: Close on click outside
- selfClose: false,
- // Boolean: Block close event on click
- selfBlock: false,
- // Boolean: Open accordion with id on hash change
- hash: true,
- // Mixed: Null or array of objects
- breakpoints: null
- });
6.回调函数。
- $('.demo').beefup({
- onInit: function() {},
- onOpen: function() {},
- onClose: function() {},
- onScroll: function() {}
- });
更新日志：
v1.4.9 (2022-12-12)
- 使用节点lts/*
- 凹凸相关性
v1.4.8 (2022-10-11)
- 更新的依赖项
v1.4.7 (2022-07-11)
- 更新的依赖项
v1.4.6 (2022-04-04)
- 更新的依赖项
v1.4.5 (2022-02-14)
- 迁移到样式表v14
- 凹凸相关性
v1.4.4 (2021-12-02)
- 更新依赖项
第1.4.3节（2021-10-30）
- 更新测试
- 凹凸相关性
v1.4.2 (2021-09-23)
- 凹凸相关性
v1.4.1 (2021-09-03)
- 凹凸相关性
第1.4.0节（2021-07-14）
- 使现代化
v1.3.1 (2021-06-02)
- package.json中的白名单文件
- 凹凸相关性
v1.3.0 (2021-05-31)
- 使用stylelint
- 修复Sass斜线作为除法弃用警告
- 更新Jest和ESLint配置
- 凹凸相关性
v1.2.5 (2021-05-14)
- 使现代化
v1.2.4 (2021-04-08)
- 已更新依赖项
v1.2.3 (2021-04-07)
- 已更新
第1.2.2节（2021-04-06）
- 在package.json中提供默认文件
v1.2.1 (2020-10-07)
- 在package.json中提供默认文件
- 动画前删除隐藏属性
2019-11-03
- 修正了：$buildup.open方法无法滚动到手风琴面板，或者我缺少配置
v1.2.0版本（2019-10-05）
- 添加辅助功能选项
- 更新按钮样式
- 前缀专用方法
- 用笑话代替QUnit
v1.1.9（2019年9月30日）
- 添加“第一个”和“最后一个”选择器
v1.1.8 (2019-09-28)
- 修复嵌套手风琴中的openSingle选项
2018-11-12
- 添加了哈希更改支持和演示
2018-08-02
- 修复关闭方法
- v1.17版本
2018-02-07
- 解决滞留问题并清理
2016-10-02
- v1.1.5:修复样式问题
2016-09-28
- 改进stayOpen功能。
2014-09-11
- 添加click方法中缺少的返回值
2014-07-18
- 改进布局并解决一些措辞/标记问题
2014-07-09
- 更新到v1.0.1
预览截图
轻量级jQuery Accordion插件显示和隐藏元素 BeefUp