手风琴 / 可折叠

手风琴布局

常见的手风琴布局可以视为以下内容：

<div class="accordion-list">
  <div class="accordion-item">
    <div class="accordion-item-toggle">...</div>
    <div class="accordion-item-content">...</div>
  </div>
  <div class="accordion-item accordion-item-opened">
    <div class="accordion-item-toggle">...</div>
    <div class="accordion-item-content">...</div>
  </div>
  <div class="accordion-item">
    <div class="accordion-item-toggle">...</div>
    <div class="accordion-item-content">...</div>
  </div>
  ...
</div>

其中

accordion-list- 手风琴项列表设置。可选类
- accordion-item- 单个手风琴项。必需
  - accordion-item-toggle- 展开/收起手风琴项内容的链接。必需
  - accordion-item-content- 隐藏的手风琴项内容。必需
- accordion-item-opened- 单个打开的手风琴项

可折叠布局

如果你想使用单个独立的可折叠元素，你可以省略“accordion-list”包装元素：

<!-- Single collapsible element -->
<div class="accordion-item">
    <div class="accordion-item-toggle">...</div>
    <div class="accordion-item-content">...</div>
</div>

<!-- Another separate collapsible element -->
<div class="accordion-item">
    <div class="accordion-item-toggle">...</div>
    <div class="accordion-item-content">...</div>
</div>

手风琴列表视图

如果你将列表视图用作手风琴，你可以使用“item-link”元素代替“accordion-toggle”：

<div class="list accordion-list">
    <ul>
        <li class="accordion-item">
            <a href="" class="item-link item-content">
                <div class="item-inner">
                    <div class="item-title">Item 1</div>
                </div>
            </a>
            <div class="accordion-item-content">Item 1 content ...</div>
        </li>
        <li class="accordion-item">
            <a href="" class="item-link item-content">
                <div class="item-inner">
                    <div class="item-title">Item 2</div>
                </div>
            </a>
            <div class="accordion-item-content">Item 2 content ...</div>
        </li>
    </ul>
</div>

相反的手风琴

要在相反的一侧（在LTR中的左侧）渲染手风琴箭头图标，需要向手风琴容器或手风琴列表添加额外的accordion-opposite类：

<!-- Accordion opposite -->
<div class="accordion-list accordion-opposite">
  <div class="accordion-item">
    <div class="accordion-item-toggle">...</div>
    <div class="accordion-item-content">...</div>
  </div>
  <div class="accordion-item accordion-item-opened">
    <div class="accordion-item-toggle">...</div>
    <div class="accordion-item-content">...</div>
  </div>
  <div class="accordion-item">
    <div class="accordion-item-toggle">...</div>
    <div class="accordion-item-content">...</div>
  </div>
  ...
</div>

<!-- Accordion list opposite -->
<div class="list accordion-list accordion-opposite">
  <ul>
    <li class="accordion-item">
      <a href="" class="item-link item-content">
        <div class="item-inner">
          <div class="item-title">Item 1</div>
        </div>
      </a>
      <div class="accordion-item-content">Item 1 content ...</div>
    </li>
    <li class="accordion-item">
      <a href="" class="item-link item-content">
        <div class="item-inner">
          <div class="item-title">Item 2</div>
        </div>
      </a>
      <div class="accordion-item-content">Item 2 content ...</div>
    </li>
  </ul>
</div>

示例

accordion.html

<div class="page">
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner sliding">
      <div class="title">Accordion</div>
    </div>
  </div>
  <div class="page-content">
    <div class="block-title">List View Accordion</div>
    <div class="list list-strong list-outline-ios list-dividers-ios inset-md accordion-list">
      <ul>
        <li class="accordion-item">
          <a class="item-link item-content">
            <div class="item-inner">
              <div class="item-title">Lorem Ipsum</div>
            </div>
          </a>
          <div class="accordion-item-content">
            <div class="block">
              <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elementum id neque nec commodo. Sed vel
                justo at turpis laoreet pellentesque quis sed lorem. Integer semper arcu nibh, non mollis arcu tempor
                vel. Sed pharetra tortor vitae est rhoncus, vel congue dui sollicitudin. Donec eu arcu dignissim felis
                viverra blandit suscipit eget ipsum.
              </p>
            </div>
          </div>
        </li>
        <li class="accordion-item">
          <a class="item-link item-content">
            <div class="item-inner">
              <div class="item-title">Nested List</div>
            </div>
          </a>
          <div class="accordion-item-content">
            <div class="list">
              <ul>
                <li>
                  <div class="item-content">
                    <div class="item-media"> <i class="icon icon-f7"></i>
                    </div>
                    <div class="item-inner">
                      <div class="item-title">Item 1</div>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="item-content">
                    <div class="item-media"> <i class="icon icon-f7"></i>
                    </div>
                    <div class="item-inner">
                      <div class="item-title">Item 2</div>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="item-content">
                    <div class="item-media">
                      <i class="icon icon-f7"></i>
                    </div>
                    <div class="item-inner">
                      <div class="item-title">Item 3</div>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="item-content">
                    <div class="item-media">
                      <i class="icon icon-f7"></i>
                    </div>
                    <div class="item-inner">
                      <div class="item-title">Item 4</div>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </li>
        <li class="accordion-item">
          <a class="item-link item-content">
            <div class="item-inner">
              <div class="item-title">Integer semper</div>
            </div>
          </a>
          <div class="accordion-item-content">
            <div class="block">
              <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elementum id neque nec commodo. Sed vel
                justo at turpis laoreet pellentesque quis sed lorem. Integer semper arcu nibh, non mollis arcu tempor
                vel. Sed pharetra tortor vitae est rhoncus, vel congue dui sollicitudin. Donec eu arcu dignissim felis
                viverra blandit suscipit eget ipsum.
              </p>
            </div>
          </div>
        </li>
      </ul>
    </div>

    <div class="block-title">Opposite Side</div>
    <div class="list list-strong list-outline-ios list-dividers-ios inset-md accordion-opposite accordion-list">
      <ul>
        <li class="accordion-item">
          <a class="item-link item-content">
            <div class="item-inner">
              <div class="item-title">Lorem Ipsum</div>
            </div>
          </a>
          <div class="accordion-item-content">
            <div class="block">
              <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elementum id neque nec commodo. Sed vel
                justo at turpis laoreet pellentesque quis sed lorem. Integer semper arcu nibh, non mollis arcu tempor
                vel. Sed pharetra tortor vitae est rhoncus, vel congue dui sollicitudin. Donec eu arcu dignissim felis
                viverra blandit suscipit eget ipsum.
              </p>
            </div>
          </div>
        </li>
        <li class="accordion-item">
          <a class="item-link item-content">
            <div class="item-inner">
              <div class="item-title">Nested List</div>
            </div>
          </a>
          <div class="accordion-item-content">
            <div class="list">
              <ul>
                <li>
                  <div class="item-content">
                    <div class="item-media"> <i class="icon icon-f7"></i>
                    </div>
                    <div class="item-inner">
                      <div class="item-title">Item 1</div>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="item-content">
                    <div class="item-media"> <i class="icon icon-f7"></i>
                    </div>
                    <div class="item-inner">
                      <div class="item-title">Item 2</div>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="item-content">
                    <div class="item-media">
                      <i class="icon icon-f7"></i>
                    </div>
                    <div class="item-inner">
                      <div class="item-title">Item 3</div>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="item-content">
                    <div class="item-media">
                      <i class="icon icon-f7"></i>
                    </div>
                    <div class="item-inner">
                      <div class="item-title">Item 4</div>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </li>
        <li class="accordion-item">
          <a class="item-link item-content">
            <div class="item-inner">
              <div class="item-title">Integer semper</div>
            </div>
          </a>
          <div class="accordion-item-content">
            <div class="block">
              <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elementum id neque nec commodo. Sed vel
                justo at turpis laoreet pellentesque quis sed lorem. Integer semper arcu nibh, non mollis arcu tempor
                vel. Sed pharetra tortor vitae est rhoncus, vel congue dui sollicitudin. Donec eu arcu dignissim felis
                viverra blandit suscipit eget ipsum.
              </p>
            </div>
          </div>
        </li>
      </ul>
    </div>

  </div>
</div>

手风琴应用方法

手风琴还有一个JavaScript API，允许你以编程方式打开和关闭它们。让我们看看一些手风琴应用方法：

app.accordion.open(item)- 打开指定的手风琴项

item - HTMLElement或字符串（使用CSS选择器）的accordion-item元素（<div class="accordion-item">）。必需

app.accordion.close(item)- 关闭指定的手风琴项

item - HTMLElement或字符串（使用CSS选择器）的accordion-item元素（<div class="accordion-item">）。必需

app.accordion.toggle(item)- 切换指定的手风琴项

item - HTMLElement或字符串（使用CSS选择器）的accordion-item元素（<div class="accordion-item">）。必需

手风琴事件

手风琴将在手风琴项上触发以下DOM事件，并在应用实例上触发应用事件：

DOM 事件

事件	Target	描述
accordion:beforeopen	手风琴项<div class="accordion-item">	事件将在手风琴内容开始打开动画之前被触发。`event.detail.prevent`包含一个函数，当被调用时将阻止手风琴打开
accordion:open	手风琴项<div class="accordion-item">	事件将在手风琴内容开始打开动画时被触发
accordion:opened	手风琴项<div class="accordion-item">	事件将在手风琴内容完成打开动画后被触发
accordion:beforeclose	手风琴项<div class="accordion-item">	事件将在手风琴内容开始关闭动画之前被触发。`event.detail.prevent`包含一个函数，当被调用时将阻止手风琴关闭
accordion:close	手风琴项<div class="accordion-item">	事件将在手风琴内容开始关闭动画时被触发
accordion:closed	手风琴项<div class="accordion-item">	事件将在手风琴内容完成关闭动画后被触发

App Events

事件	参数	描述
accordionBeforeOpen	（el, prevent）	事件将在手风琴内容开始打开动画之前被触发。`prevent`包含一个函数，当被调用时将阻止手风琴打开
accordionOpen	(el)	事件将在手风琴内容开始打开动画时被触发
accordionOpened	(el)	事件将在手风琴内容完成打开动画后被触发
accordionBeforeClose	（el, prevent）	事件将在手风琴内容开始关闭动画之前被触发。`prevent`包含一个函数，当被调用时将阻止手风琴关闭
accordionClose	(el)	事件将在手风琴内容开始关闭动画时被触发
accordionClosed	(el)	事件将在手风琴内容完成关闭动画后被触发

var app = new Framework7();

var $ = Dom7;

$('.accordion-item').on('accordion:opened', function () {
  app.dialog.alert('Accordion item opened');
});

$('.accordion-item').on('accordion:closed', function (e) {
  app.dialog.alert('Accordion item closed');
});

app.on('accordionOpened', function (el) {
  console.log('The following element opened:');
  console.log(el);
});

改进此文档

在本页上

手风琴布局
可折叠布局
手风琴列表视图
相反的手风琴
示例
手风琴应用方法
手风琴事件

DOM 事件
App Events