2016-04-20 15 views
0

「3DBanners」の画像をクリックすると、ID「FirstBanners」のdivが開きます。Divを実行していない場合画像をクリックするとslideToggle()が表示されません

本質的には、http://prntscr.com/aufua6からhttp://prntscr.com/aufupsにスライドダウンして、それゆえslideToggle()に移動します。ここで

は私のコードです:

#Thumbnails { 
 
\t position:absolute; 
 
\t top:460px; 
 
\t -webkit-filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.70)); 
 
    filter:   drop-shadow(5px 5px 5px rgba(0,0,0,0.70)); 
 
} 
 
.Thumbs { 
 
\t cursor:pointer; 
 
} 
 
.BannerCaptions { 
 
\t font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif; 
 
\t text-transform:capitalize; 
 
\t font-size:26px; 
 
\t color:#FFFFFF; 
 
\t padding:5px 0px 20px 0px; 
 
} 
 
.StillBanners { 
 
\t width:1500px; 
 
} 
 
#DayZSnowy { 
 
\t padding-top:15px; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
 
<center> 
 
<div id="Thumbnails" style="display:none;"> 
 
<a id="FirstBannersThumb"><img src="../Images/Thumbnails/3DBanners.png" alt="3D Banners" class="Thumbs" /></a> 
 
<div id="FirstBanners"> 
 
\t <img src="../Images/Still Benners/DayZSnowy.png" alt="DayZ Snowy" id="DayZSnowy" class="StillBanners" /> 
 
    <p id="DayZSnowyCaption" class="BannerCaptions">DayZ Snowy Banner</p> 
 
    <img src="../Images/Still Benners/InFa.png" alt="InFa Space" id="InFaSpace" class="StillBanners" /> 
 
    <p id="InFaSpaceCaption" class="BannerCaptions">InFa Space Banner</p> 
 
    <img src="../Images/Still Benners/L7Zeon.png" alt="L7 Zeon" id="L7Zeon" class="StillBanners" /> 
 
    <p id="L7ZeonCaption" class="BannerCaptions">L7 Zeon Banner</p> 
 
    <img src="../Images/Still Benners/Mythh.jpg" alt="Void Mythh" id="Mythh" class="StillBanners" /> 
 
    <p id="MythhCaption" class="BannerCaptions">Void Mythh Banner</p> 
 
    <img src="../Images/Still Benners/L7ArtsRiver.png" alt="L7 Arts" id="L7ArtsRiver" class="StillBanners" /> 
 
    <p id="L7ArtsRiverCaption" class="BannerCaptions">L7 Arts Banner</p> 
 
    <img src="../Images/Still Benners/Insan3Lik3Var2.jpg" alt="Insan3Lik3" id="Insan3Lik3" class="StillBanners" /> 
 
    <p id="Insan3Lik3Caption" class="BannerCaptions">Insan3Lik3 Banner</p> 
 
    <img src="../Images/Still Benners/Soulja.JPG" alt="S3 Soulja" id="Soulja" class="StillBanners" /> 
 
    <p id="SouljaCaption" class="BannerCaptions">S3 Soulja Banner</p> 
 
    <img src="../Images/Still Benners/Zorich.jpg" alt="Zorich" id="Zorich" class="StillBanners" /> 
 
    <p id="ZorichCaption" class="BannerCaptions">Zorich Banner</p> 
 
    <img src="../Images/Still Benners/Invade.png" alt="L7 Invade" id="Invade" class="StillBanners" /> 
 
    <p id="InvadeCaption" class="BannerCaptions">L7 Invade Banner</p> 
 
    <img src="../Images/Still Benners/ExampleFX.jpg" alt="ExampleFX" id="ExampleFX" class="StillBanners" /> 
 
    <p id="ExampleFXCaption" class="BannerCaptions">ExampleFX Banner (This is 3D because some buildings in background are 3D Modelled)</p> 
 
    <img src="../Images/Still Benners/Whiz.jpg" alt="SoaR Whiz" id="Whiz" class="StillBanners" /> 
 
    <p id="WhizCaption" class="BannerCaptions">SoaR Whiz Banner</p> 
 
    <img src="../Images/Still Benners/Compleqz.jpg" alt="Compleqz" id="Compleqz" class="StillBanners" /> 
 
    <p id="CompleqzCaption" class="BannerCaptions">Compleqz Banner</p> 
 
    <img src="../Images/Still Benners/Troopa.JPG" alt="Troopa" id="Troopa" class="StillBanners" /> 
 
    <p id="TroopaCaption" class="BannerCaptions">Troopa Banner</p> 
 
    <img src="../Images/Still Benners/Mega3.jpg" alt="Mega" id="Mega" class="StillBanners" /> 
 
    <p id="MegaCaption" class="BannerCaptions">Mega Banner</p> 
 
</div> 
 
<a class="Thumbs"><img src="../Images/Thumbnails/2DBanners.png" alt="2D Banners" id="2DBannersThumb" /></a> 
 
<a class="Thumbs"><img src="../Images/Thumbnails/GIFBanners.png" alt="GIF Banners" id="GIFBannersThumb" /></a> 
 
</div> 
 
</center> 
 
<script type="text/javascript"> 
 
$(document).ready(function() { 
 
    $("#FirstBannersThumb").click(function() { 
 
     $("#FirstBanners").slideToggle(1000); 
 
    }); 
 
}); 
 
</script>

+1

https://jsfiddle.net/arunpjohny/gq6vpo5r/1/ - コンソールにエラーがありますか? –

+0

レスポンスありがとうございますが、この特定のコードにはエラーはありません。 Dreamweaverには "Strict Use"ステートメントが含まれていると言われていますが、誰もがこれは大きな問題や問題ではなく、これらのエラーは他のリンクされたファイルにあります。 – JustPassingBy

+0

それはフィドルではうまくいくと思われますが、何らかの理由で私のものではないようです。 – JustPassingBy

答えて

0

のために、この

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

を交換し ! document.readyの部分を削除する必要があったため、削除するだけでした。

0

はあなたのjQueryのバージョンを変更してください。私は答えを見つけ、この

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

+0

それでもうまくいけません – JustPassingBy

関連する問題