Question

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

jQuery UI Accordion和iFrame在桌面浏览器上运行得很好（虽然有点笨拙的FF）但是当我在iPhone和iPad上测试它时它不起作用。基本上第一个项目是可见的和可用的，但是当我尝试选择另一个项目时，它看起来像是隐藏了内容。看看here。你会发现它在桌面浏览器上运行良好，但在iPhone和iPad上却被打破了。如果您没有iPhone或iPad来查看它，请image

正如您所看到的，所有内容都是隐藏的。当我点击第二个项目时，手风琴仍然会动画，但没有任何内容可见。

以下是我在脑海中使用的内容

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

注意：起初我正在使用谷歌的代码，但我认为可能有一个错误，所以我去试图获得最新和最好的。

<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浏览器上进行测试时，应该没什么区别。

我无法重现此问题。

使用jQuery UI Accordion和iFrame时遇到问题

1 个答案: