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

我更多的是一个设计师而不是一个开发者，所以我希望有人能帮我解决这个问题。我正在使用jQueryUI手风琴来显示内容。当我只有文本和链接时，它的性能很好。然而，我想展示视频，我希望使用iPhone和iPad的人能够看到它，因此我使用Vimeo提供的iFrame来检查用户的浏览器和操作系统，并以HTML 5或Flash动态交付视频

jQueryUIAccordion和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>

皮肤治疗中心希望告知客户正在执行的一些最流行的程序及其所需的内容。东南吉设计及发展有限公司；媒体制作了5部独立的电影，分别在其网站和水疗中心的平板电视上放映查看我们为皮肤Spa制作的其他视频：||


需要向客户解释他们独特的服务。由于他们的大部分用户都是即将搬进大学宿舍的高中生，因此网络视频必须简洁而具有描述性。这段视频今天在他们的网站上使用

注意：起初我使用的是谷歌的代码，但我认为可能有一个bug，所以我去尝试获取最新和最棒的代码

<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");

@导入url（“http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/south-street/jquery-ui.css");

---

任何帮助都将不胜感激

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

所以无论你是在iPhone/iPad还是Safari浏览器上测试，都应该没有什么区别

---

我无法复制这个问题。

这也是我的想法，但显然不是这样。有趣的是，内容确实存在，但它是隐藏的。我甚至不知道它，但我只是在捏和放大，看看它是否有任何影响。（我在抓救命稻草）。我听到了视频的音频。它就在这里——它只是隐藏起来了！