折叠

折叠.fold为控制子元素的显示和隐藏的功能，子元素包含标题.fold-head及内容.fold-body两部份。

折叠样式

标题一

内容一

标题二

内容二

标题三

内容三

    <div class="fold" id="fold">
      <div class="fold-item">
        <div class="fold-head">标题一</div>
        <div class="fold-body">内容一</div>
      </div>
      <div class="fold-item">
        <div class="fold-head">标题二</div>
        <div class="fold-body">内容二</div>
      </div>
      <div class="fold-item">
        <div class="fold-head">标题三</div>
        <div class="fold-body">内容三</div>
      </div>
    </div>

调用方式

    <script>
      $(function(){
        $('#fold').fold({
          "toggle":"#fold>.fold-item>.fold-head",
          "target":"#fold>.fold-item>.fold-body"
        });
      });
    </script>

参数说明

参数	类型	默认值	参数值	说明
toggle	string	/	/	切换时触发对象
target	string	/	/	目标对象
class	class	active	/	触发后父元素添加的样式类
mouse	string	click	点击click 悬浮mouseover	触发行为
open	number	0	`0`可开一个 `1`必须有一个打开 `2`可打开多个	开启设置
show	number	0	`0`全关闭 `1`第一个打开 `2`全打开	加载显示

open为1且show为2时冲突，不能同时使用。

应用示例

在改变参数时，可显示不同效果，下面示例为初始打开一个内容，点击时可以打开多个；叠加.fold-arrow样式后，可在标题右侧显示箭头。

标题一

内容一

标题二

内容二

标题三

内容三

    <div class="fold fold-arrow" id="folddemo">
      <div class="fold-item">
        <div class="fold-head">标题一</div>
        <div class="fold-body">内容一</div>
      </div>
      <div class="fold-item">
        <div class="fold-head">标题二</div>
        <div class="fold-body">内容二</div>
      </div>
      <div class="fold-item">
        <div class="fold-head">标题三</div>
        <div class="fold-body">内容三</div>
      </div>
    </div>

    <script>
      $(function(){
        $('#folddemo').fold({
          "toggle":"#folddemo>.fold-item>.fold-head",
          "target":"#folddemo>.fold-item>.fold-body",
          "open":2,
          "show":1
        });
      });
    </script>