我在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的工作代码