想隱藏的iframe鏈接被點擊

Question

，直到我有對同一page.my問題的iframe打開四個環節是的iframe需要在頁面加載的空間，我想它會保持隱藏，直到任何鏈接點擊屏幕尺寸小的同一頁面正在加載該頁面加載的iframe，但它在大屏幕尺寸下運行良好。請幫我解決這個問題。

這裏是我打開的iframe代碼：

<ul class="thumbnails"> 
    <li class="span2"> 
<h6>DELHI :</h6> 
A-21/13,Naraina Industrial Area, 
Phase II, 
New Delhi - 110028. 
Tel. No. : 011 - 49807100/101 
<a href="https://maps.google.co.in/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=Pearl+Academy+of+fashion,+CH+Girdhari+Lal+Marg,+Naraina+Industrial+Area,+Naraina,+Delhi&amp;aq=0&amp;oq=Pearl+Academy+Of+Fashion+de&amp;sll=20.984928,82.752628&amp;sspn=61.071168,79.013672&amp;ie=UTF8&amp;hq=Pearl+Academy+of+fashion,+CH+Girdhari+Lal+Marg,+Naraina+Industrial+Area,+Naraina,+Delhi&amp;t=m&amp;ll=28.648453,77.146039&amp;spn=0.011298,0.037293&amp;z=15&amp;output=embed" target="frame">Click Here To View Map</a></li> 
    <li class="span2"> 
<h6>NOIDA :</h6> 
B-25,Sector - 59, 
Noida- 201301, UP. 
Tel. No. : 0120 - 4904000 
<a href="https://maps.google.com/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q=B-25,Sector+-+59,+Noida-+201301+UP.&amp;sll=37.0625,-95.677068&amp;sspn=50.244827,79.013672&amp;ie=UTF8&amp;hq=&amp;hnear=Sector+59,+NOIDA,+Gautam+Buddha+Nagar,+Uttar+Pradesh,+India&amp;t=m&amp;ll=28.610219,77.367697&amp;spn=0.022605,0.074587&amp;z=14&amp;iwloc=A&amp;output=embed" target="frame">Click Here To View Map</a></li> 
    <li class="span2"> 
<h6>CHENNAI :</h6> 
82,Sterling Road, 
Nungambakkam,(Opposite Loyola College), 
Chennai - 600034 
Tel. No. : 044-42664445 /46/49/50, 43447900 
<a href="https://maps.google.co.in/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=Pearl+Academy+Of+Fashion,+Sterling+Rd,+Nungambakkam,+Chennai,+Tamil+Nadu&amp;aq=0&amp;oq=Pearl+Academy+Of+Fashion,+Chennai&amp;sll=13.065034,80.239013&amp;sspn=0.008121,0.009645&amp;ie=UTF8&amp;hq=Pearl+Academy+Of+Fashion,&amp;hnear=Sterling+Rd,+Nungambakkam,+Chennai,+Tamil+Nadu&amp;t=m&amp;ll=13.065516,80.239592&amp;spn=0.006271,0.018647&amp;z=16&amp;iwloc=A&amp;output=embed" target="frame">Click Here To View Map</a></li> 
    <li class="span2"> 
<h6>JAIPUR :</h6> 
SP-38A,RIICO Industrial Area, 
Delhi Road,Kukas, 
Jaipur-302028. 
Tel. No. : 01426 - 414800, 227515, 227616, 227617 
<a href="https://maps.google.co.in/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=Pearl+Academy+Of+Fashion,+Jaipur+city+office,+Rajasthan&amp;aq=&amp;sll=25.845253,74.840307&amp;sspn=7.677536,9.876709&amp;ie=UTF8&amp;hq=Pearl+Academy+Of+Fashion,+Jaipur+city+office,&amp;hnear=Rajasthan&amp;t=m&amp;cid=16689440355655361409&amp;ll=27.527758,76.783447&amp;spn=2.922529,9.547119&amp;z=7&amp;iwloc=A&amp;output=embed" target="frame">Click Here To View Map</a></li> 
</ul> 
<span style="color: #e15b1f;">For more information contact:<a href="#"> counsellor@pearlacademy.com</a>, Toll Free No. 1800 103 3005</span> 

AMD這裏是同一個頁面上的iframe：

<div style="display:none;"><iframe name="frame" src="#" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" width="870" height="300"></iframe></div> 

Answer 1

現在你可以做到這一點:focus

由於這樣

的CSS

.frame_div{ 
border:solid 1px red; 
    width:300px; 
    display:none; 
} 


.frame_div iframe{ 
    height:200px; 
    width:300px; 
    background:green; 
} 

.click_iframe{ 
display:inline-block; 
    vertical-align:top; 
} 
.click_iframe:focus + div{ 
display:block; 
} 

HTML

<ul class="thumbnails"> 
<li class="span2"> 
<a href="#" target="frame" class="click_iframe">Click Here To View Map</a> 
<div class="frame_div"><iframe name="frame" src="#" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" width="870" height="300"></iframe></div> 
</li> 
</ul> 

Live Demo

Answer 2

你可以onclick事件添加到您的UL：

<ul class="thumbnails" onClick="document.getElementById('frame').parentNode.style.display=''"> 

假設你的iframe ID是「框架」：

<div style="display:none;"><iframe name="frame" id="frame" src="#" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" width="870" height="300"></iframe></div>