我在iOS应用程序中使用UIWebView,在webView中,我使用了Bootstrap UI来设计展开和折叠动画。我使用的JavaScript框架是ANgularJS。我遇到的问题是展开和折叠的缓慢动画。如果按照以下设备(iPhone或iPad)中的步骤操作,则可以轻松重现此问题。

1-使用iPad在Safari中打开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的方法会导致此问题。

有人知道设计可在设备上快速运行的Expand和Collapse的其他选择是什么?

最佳答案

解决此问题的方法是使用纯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的工作代码

09-16 08:09