README

作者

Sébastien Lavoie (sebastien@lavoie.sl)

描述

简单解决常见问题

• 简单绑定选择器的折叠/展开切换
• 提供API以显示/隐藏/切换
• 在包装器上添加类collapse-{expanded,collapsed}

可以做很多事情，但这是第一个版本

先决条件

• jQuery，应与任何版本兼容，但已与1.7版进行测试

基本设置

  <div class="collapse-wrapper">
    <div class="header">
      <a href="#" class="collapse-toggle">Toggle</a>
    </div>
    <div class="collapse-box">
      <ul>
          <li>Test</li>
          <li>Test</li>
          <li>Test</li>
          <li>Test</li>
      </ul>
    </div>
  </div>

初始化

$(function() {
    $('.collapse-wrapper').autoCollapser();
});

选项

{
    box: '.collapse-box',                 // The box that will be collasped
    toggle: '.collapse-toggle',           // The trigger, binding will be added onClick
    collapsedClass: 'collapse-collapsed', // Class to be added to the wrapper when it is collapsed
    expandedClass: 'collapse-expanded',   // Idem
    duration: 800,                        // Speed in ms for the animation,
    stop: true                            // Empty the queue using .stop(true, true)
}

CSS示例

.collapse-wrapper {
    border: 1px solid green;
    padding: 10px;
    margin: 10px;
}

.collapse-expanded .collapse-toggle::after {
    content: " -"
}
.collapse-collapsed .collapse-toggle::after {
    content: " +"
}

.collapse-box {
    border: 1px solid red;
    margin: 10px;
}

API

$('.collapse-wrapper').autoCollapser('show');
$('.collapse-wrapper').autoCollapser('hide');
$('.collapse-wrapper').autoCollapser('toggle');

事件

创建了两个事件，它们都传递一个布尔值data.show

• autoCollapser.toggle.start
• autoCollapser.toggle.after

$('.collapse-wrapper').on('autoCollapser.toggle.start', function(event,data){
  console.log("Collapser has started " + (data.show ? 'expanding' : 'collasping'));
});
$('.collapse-wrapper').on('autoCollapser.toggle.after', function(event,data){
  console.log("Collapser was " + (data.show ? 'expanded' : 'collasped'));
});

演示

查看演示