Проблема с использованием jQuery UI Accordion и iFrame

Question

Я больше дизайнер, чем разработчик, поэтому я надеюсь, что кто-то может помочь мне решить эту проблему. Я использую JQuery UI Accordion для отображения содержимого. Когда все, что у меня есть, это текст & ссылок, он отлично работает. Тем не менее, я хочу продемонстрировать видео, и я хочу, чтобы люди с iPhones и iPads могли его видеть, поэтому я использую iFrame, который Vimeo предоставляет для проверки браузера пользователя & ОС и динамического доставлять видео в формате HTML 5 или Flash.

JQuery UI Accordion и iFrame отлично работают на настольных браузерах (хотя и немного неуклюже FF), но когда я тестирую его на своем iPhone и iPad, он не работает. В основном первый элемент видимый и пригодный для использования, но в тот же момент, когда я пытаюсь выбрать другой элемент, похоже, что он скрывает содержимое. Проверьте это here. Вы увидите, что он отлично работает на настольном браузере, но он разбит на iPhones и iPads. Если у вас нет 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.

Мне не удалось воспроизвести эту проблему.