jQuery手风琴折叠菜单特效代码（Accrdion.js）

演示  website 下载

这是一款可配置的、可定制的、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, 
});

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