使用jQuery UI手風琴和iFrame的問題

Question

我更喜歡設計師而不是開發人員，所以我希望有人能幫助我解決這個問題。我正在使用jQuery UI Accordion來顯示內容。當我擁有的是文本&鏈接它表現很好。不過，我想展示視頻，我希望iPhone和iPad用戶能夠看到它，所以我使用Vimeo提供的iFrame來檢查用戶的瀏覽器操作系統，並動態地以HTML 5或Flash格式提供視頻。

jQuery UI手風琴和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> 

注：起初我是用正確的代碼但我認爲可能有一個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"); 

任何幫助都將非常感激！

Answer 1

iPhone和iPad都使用WebKit作爲他們的渲染引擎。

因此，您在iPhone/iPad或Safari瀏覽器上測試此功能時應該幾乎沒有任何區別。

我無法重現此問題。