Javascript / jquery 在相冊中顯示和隱藏 div

Question

這顯示了在單擊按鈕時隱藏照片縮略圖等的代碼。 你可以在這里找到我正在創建的網站 www.samuelbradley.com

 $(document).ready(function(){

 hidden = true;
 $(".btn-slide").click(function () {
if(hidden == false) {

    $("#slideshow").slideDown('3000, linear, callback');
    $("#thumbs").slideUp('3000, linear, callback');
    hidden = true;
} else {
    $("#slideshow").slideUp('3000, linear, callback');
    $("#thumbs").slideDown('3000, linear, callback');
    hidden = false;
}
});
});

$(document).ready(function(){

 hidden = true;
 $(".thumb").click(function () {
if(hidden == false) {

    $("#slideshow").slideDown('3000, linear, callback');
    $("#thumbs").slideUp('3000, linear, callback');
    hidden = true;
} else {
    $("#slideshow").slideUp('3000, linear, callback');
    $("#thumbs").slideDown('3000, linear, callback');
    hidden = false;
}
 });
 });

此代碼顯示包含縮略圖列表等的主體 HTML 代碼。

<div id="thumbnail-image"><a href="#" ><img src="images/thumbnail.jpg" alt="thumanil-        image" title="Thumbnail View for Samuel Bradley" width="40" border="0" class="btn-slide"  /></a>
 </div><!--end of thumbnail image-->

</div><!--end of header-->

<div id="controlholder">
<div id="controls"></div>
</div>

<div id="slideshow"> 
 </div>

 <div id="thumbs">
 <ul class="thumbs noscript">
<li><a href="images/archive/live-tour/1_noelfielding.jpg" title="Samuel Bradley         Photography" class="thumb"><img src="images/thumbnail/LIVE-TOUR_T/1 NOEL FIEDLING_THE BIG    CHILL_thumb" width="185" alt="Samuel Bradley" border="0"/></a></li>
<li><a href="images/archive/live-tour/2_noelfielding.jpg" class="thumb"><img    src="images/thumbnail/LIVE-TOUR_T/2_NOEL FIELDING, THE BIG CHILL_thumb" width="185"      alt="Samuel Bradley" border="0"/></a></li>
<li><a href="images/archive/live-tour/3_dylanmoran.jpg" class="thumb"><img src="images/thumbnail/LIVE-TOUR_T/3_DYLAN MORAN_THE BIG CHILL_thumb" width="185" alt="Samuel Bradley" border="0"/></a></li>
<li><a href="images/archive/live-tour/4_youmeatsix.jpg" class="thumb"><img src="images/thumbnail/LIVE-TOUR_T/4_YOU ME AT SIX, HOLD ME DOWN TOUR_thumb" width="185" alt="Samuel Bradley" border="0"/></a></li>

大圖像被加載到#slideshow div 中，它可以輕松顯示和隱藏，但是我似乎無法隱藏拇指 div？ 即使我將#thumbs div 設置為 display:none 它仍然顯示。 我基本上只希望在頁面加載時顯示大圖像，然后拇指 div 在全視圖和縮略圖視圖之間切換，但我不希望能夠同時看到縮略圖和大圖像。 任何幫助將非常感激。 我希望我已經解釋並展示了足夠的例子？

索菲

Answer 1

我看過這個網站，順便說一句，它看起來很棒。

除了實際顯示“#thumbs”div 時，它對我有用。 你試過把：

$('#thumbs').hide();

在 `.ready() 函數之一中？ 這應該在開始時隱藏該 div。