帝国模板之家为广大用户提供专业、一站式建站服务。

网页特效

网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。

当前位置:首页 > 资源 > 网页特效 > 正文

jQuery手风琴折叠菜单特效代码(Accrdion.js)

帝国模板之家 2020-11-13 网页特效 评论

这是一款可配置的、可定制的、jQuery手风琴菜单折叠插件。

功能:

  • 允许在页面加载时打开第一个手风琴面板。

  • 可配置打开/关闭动画。

  • 打开时自动将页面滚动到当前手风琴面板。

使用方法:

1. 添加手风琴所需的HTML结构。

  • .my-accordion: accordion wrapper

  • .accrdion-entry: accordion header

  • .accrdion-content: accordion content

<div class="my-accordion">
  <article class="accrdion-entry">
    <header class="accrdion-header">
      Accordion Header 1
    </header>
    <div class="accrdion-content">
      <p>Accordion Content 1</p>
      </div>
  </article>
  <article class="accrdion-entry">
    <header class="accrdion-header">
      Accordion Header 2
    </header>
    <div class="accrdion-content">
      <p>Accordion Content 2</p>
      </div>
  </article>
  <article class="accrdion-entry">
    <header class="accrdion-header">
      Accordion Header 3
    </header>
    <div class="accrdion-content">
      <p>Accordion Content 3</p>
      </div>
  </article>
  ...
</div>

2. 下载插件,在html页面中加载jQuery库和accrdion.js插件文件。

<script src="jquery.min.js"></script>
<script src="accrdion.js"></script>

3. 插件初始化。

$(function(){
  $('.my-accordion').accrdion();
});

4.插件没有提供默认的CSS样式。因此,可以使用CSS定制手风琴的外观。

my-accrdion {
  background-color: #fafafa;
}
.accrdion-header {
  background-color: #222;
  border-bottom: 1px solid #fafafa;
  color: #fff;
  cursor: pointer;
  padding: .5rem 1rem;
  font-size: 1.5rem;
}
.accrdion-content {
  padding: .5rem 1rem;
}

5.确定是否在页面加载时打开第一个项目。默认值:true。

$('.my-accordion').accrdion({
  openFirstByDefault: false 
});

6.确定是否在打开/关闭当前项时关闭所有其他项。默认值:“single”。

$('.my-accordion').accrdion({
  displayStyle: 'any'
});

7.自定义动画速度(毫秒)。默认值:400。

$('.my-accordion').accrdion({
  toggleSpeed: 500
});

8.确定是否滚动到当前项的顶部。默认值:true。

$('.my-accordion').accrdion({
  scrollToActive: true,
  scrollSpeed: 500, 
});

会员登陆后即可下载资源文件。更多好用网站特效插件,请关注帝国模板之家

这世上无忧无虑的人,反而相对寿命会长点。

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

网页插件

帝国模板之家 | www.moyouyouw.cn

本站所有模板/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系站长删除,谢谢! 寻找帝国cms模板首选帝国模板之家,用心做站,上线至今广受好评,值得信赖!

  • 交流群1:帝国cms交流群1
  • 交流群2:帝国cms交流群2
在线QQ 给我留言