1

我在我的 iOS 应用程序中使用 UIWebView，在 webView 中我使用 Bootstrap UI 来设计展开和折叠动画。我使用的 JavaScript 框架是 AngularJS。我面临的问题是展开和折叠的缓慢动画。如果您使用设备（iPhone 或 iPad）按照以下步骤操作，您可以轻松重现此问题

1-通过 Safari 使用 iPad打开 Bootstrap 网站（http://angular-ui.github.io/bootstrap/ ）。

2- 在折叠段落下，点击示例按钮，它可以折叠和展开简单的内容。请注意扩展内容所需的时间。

您也可以为 JQuery 测试此问题，步骤如下：

1-通过 Safari 使用 iPad打开 JQuery Mobile 网站 ( http://view.jquerymobile.com/1.3.1/dist/demos/widgets/collapsibles/ )。2- 点击示例按钮，展开和折叠一个简单的按钮。请注意扩展内容所需的时间。

根据我们的用户体验反馈，展开和折叠所需的时间确实很慢。我研究了这个问题并调试了 AngularJS 框架，看看这个问题是从哪里来的。似乎有一种称为 EventHandler 的方法会导致此问题。

在此处输入图像描述

任何人都知道设计在设备上快速运行的展开和折叠的其他选项是什么？

4

1 回答 1

2

这个问题的解决方案是使用纯 CSS 进行展开和折叠

HTML 代码

<body>
    <section>
      <article>
        <details>
          <summary>Step by Step Guides</summary>
          <details>
            <summary>Getting Started</summary>
            <p>1. Signup for a free trial</p>
          </details>
          <details>
            <summary>Setting up a backup schedule</summary>
            <p>This step assumes you have already signed up and installed the software</p>
          </details>
        </details>
        <details>
          <summary>Installation/Upgrade Issues</summary>
          <p>After setup the program doesn't start</p>
        </details>
      </article>

      <article>
        <details>
          <summary>SERVER Step by Step Guides</summary>
          <details>
            <summary>Getting Started</summary>
            <p>1. Signup for a free trial</p>
          </details>
          <details>
            <summary>Setting up a backup schedule</summary>
            <p>This step assumes you have already signed up and installed the software</p>
          </details>
        </details>
        <details>
          <summary>Installation/Upgrade Issues</summary>
          <p>After setup the program doesn't start</p>
        </details>
      </article> 

</section>
</body>

CSS 代码

    summary::-webkit-details-marker {
 color: #00ACF3;
 font-size: 125%;
 margin-right: 2px;
}
summary:focus {
    outline-style: none;
}
article > details > summary {
    font-size: 28px;
    margin-top: 16px;
}
details > p {
    margin-left: 24px;
}
details details {
    margin-left: 36px;
}
details details summary {
    font-size: 16px;
}

Jsfiddle上的工作代码

于 2014-01-25T14:17:54.390 回答