使用 jQuery UI Accordion 和 iFrame 时出现问题

Question

我更像是一名设计师而不是开发人员，所以我希望有人可以帮助我解决这个问题。我正在使用 jQuery UI Accordion 来显示内容。当我只有文字和信息时链接它表现良好。但是，我想展示视频，并且希望拥有 iPhone 和 iPad 的人能够看到它，因此我使用 Vimeo 提供的 iFrame 来检查用户的浏览器和视频。操作系统并以 HTML 5 或 Flash 动态交付视频。

jQuery UI Accordion 和 iFrame 在桌面浏览器上运行得很好（尽管 FF 有点笨拙），但是当我在 iPhone 和 iPad 上测试它时，它不起作用。基本上第一个项目是可见且可用的，但是当我尝试选择另一个项目时，它看起来像是隐藏了内容。请查看此处。您会发现它在桌面浏览器上运行良好，但在 iPhone 和 iPad 上却出现问题。如果您没有 iPhone 或 iPad 来查看，这里有一个图片

可以看到所有的内容都被隐藏了。当我单击第二个项目时，手风琴仍然有动画，但没有任何内容可见。

这是我在脑海中使用的内容

<script type='text/javascript' src='Scripts/jquery-1.5.1.min.js'></script>
<script type='text/javascript' src='Scripts/jquery-ui-1.8.14.custom.min.js'></script>
<link rel="stylesheet" href="css/south-street/jquery-ui.css" type="text/css" />

这是我在身体中使用的内容

<td width="626"><div id="jQueryUIAccordion" >
    <h3><a href="#">The Skin Spa</a></h3>
    <div>


<iframe src="http://player.vimeo.com/video/7691842?title=0&amp;byline=0&amp;portrait=0" width="540" height="304" frameborder="0"></iframe>
        <p class="TM-Font1"><a href="http://www.skinspanewyork.com/" target="_new">The Skin Spa</a>,  skin treatment center, wanted to inform their customers on some of the most popular procedures being performed and what they entailed. Tonangi Design &amp; Media created 5 separate movies that are showcased on their website as well as on flat screen televisions in their spa locations. <strong>View the rest of the videos that we produced for the Skin Spa</strong>: <a href="port_photolight.html"path/to/pop-page.htm" target="page" onClick="window.open('','page','toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=1,width=640,height=400,left=0,top=0,titlebar=no')">Photolight</a>    | <a href="port_skint.html"path/to/pop-page.htm" target="page" onClick="window.open('','page','toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=0,width=640,height=400,left=0,top=0,titlebar=no')">Skin Tightening</a>| <a href="port_hair.html"path/to/pop-page.htm" target="page" onClick="window.open('','page','toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=0,width=640,height=400,left=0,top=0,titlebar=no')">Hair Removal</a> | <a href="port_micro.html"path/to/pop-page.htm" target="page" onClick="window.open('','page','toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=0,width=640,height=400,left=0,top=0,titlebar=no')">Microdermabrasion</a></p>
<p class="TM-Font1"><strong>&gt; <a href="portfolio_comm.html">Check out our TV &amp; Web commercials</a></strong></p>
    </div>
    <h3><a href="#">Hook Up Your Dorm</a></h3>
    <div>

    <iframe src="http://player.vimeo.com/video/9719129?title=0&amp;byline=0&amp;portrait=0" width="540" height="304" frameborder="0"></iframe>
        <p class="TM-Font1"><a href="http://www.hookupyourdorm.com/" target="_new">Hook Up Your Dorm</a> needed to explain their unique service to their customers. Since the bulk of their users would be high school students about to move into a college dorm, the web video had to be concise yet descriptive. The video is used on their website today.</p>
<p class="TM-Font1"><strong>&gt; <a href="portfolio_comm.html">Check out our TV &amp; Web commercials</a></strong></p>
    </div>

注释：起初我直接使用 Google 的代码，但我认为可能存在错误所以我去尝试获取最新最好的。

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js'></script>
<style type="text/css">
@import url("http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/south-street/jquery-ui.css");

任何帮助都将非常感激！

Answer 1

iPhone 和 iPad 都使用 WebKit 作为渲染引擎。

因此，无论您是在 iPhone/iPad 还是 Safari 浏览器上进行测试，绝对没有什么区别。

我无法重现此问题。