的jQuery的slideToggle（）

Question

這是我的網站：http://www.noor-azmi.com/nt/

正如你可以看到會有3個div S：

• 「點擊達爾文圖片庫」
• 「點擊卡卡杜圖片庫「
• ‘點擊愛麗絲泉的圖片庫’

當點擊它應該做的滑動wn與圖像縮略圖的div。

問題是當您點擊「點擊卡卡杜圖片庫」時，「達爾文圖片庫」會滑落。所以，當我點擊「點擊愛麗斯泉圖片庫」

只有當我從Darwin，Kakadu，Alice Springs一個一個地點擊它時，它纔是正確的，但如果我先點擊Kakadu或Alice Springs，點擊達爾文，發生問題

這是爲什麼？以下是我的jQuery代碼。

$(document).ready(function(){ 
    $(".fancybox").fancybox(); 
     $("#darwin_button").click(function(){ 
     $("#darwin_panel").slideToggle("slow"); 
    }); 

    $("#kakadu_button").click(function(){ 
     $("#kakadu_panel").slideToggle("slow"); 
    }); 

    $("#alice_button").click(function(){ 
     $("#alice_panel").slideToggle("slow"); 
    }); 

}); 

Answer 1

這是一個HTML結構問題。

得到您的div.panels在相應的#box1, #box2 and #box3它應該沒問題。

此外，您將不必使用此方法將float: left;財產置於div.panels上。

Answer 2

您可以將您的面板div包含在按鈕div中。嘗試這樣的：

<div class="buttons" id="alice_button">Click for Alice Springs image gallery 
    <div class="panels" id="alice_panel" style="display: block;"> 
    <p> 
     <a class="fancybox" rel="alice" href="image/alice-big1.JPG"><img src="image/alice-small1.jpg" width="120" height="80"></a> 
     <a class="fancybox" rel="alice" href="image/alice-big2.jpg"><img src="image/alice-small2.jpg" width="120" height="80"></a> 
     <a class="fancybox" rel="alice" href="image/alice-big3.jpg"><img src="image/alice-small3.jpg" width="120" height="80"></a> 
     <a class="fancybox" rel="alice" href="image/alice-big4.jpg"><img src="image/alice-small4.jpg" width="120" height="80"></a> 
    </p> 
    </div> 
</div> 

Answer 3

正如文森特所說，這是你的HTML結構的問題。你的畫廊面板應該放在相應的盒子裏面，或者你可以嘗試對其進行絕對定位。

現在，當您隱藏其中一個庫div時，可見div將出現在隱藏div的左側空白處。

Answer 4

我爲你做了一個jsFiddle。

https://jsfiddle.net/n6391fdv/1/

它的作品。

$('#darwin_button,#kakadu_button,#alice_button').click(function(){ 
    $('.panels').slideUp(); 
    $('.panels').hide(); 
    $('#panel'+$(this).attr('target')).stop().slideToggle(); 
}); 

和HTML

<div class="text" id="darwin_button" target="1">Click for Darwin image gallery</div> 
<div class="text" id="kakadu_button" target="2">Click for Kakadu image gallery</div> 
<div class="text" id="alice_button" target="3">Click for Alice Springs image gallery</div> 
<div class="container_panel"> 
<div class="panels" id="panel1"> 
DARWIN 
    <p><a class="fancybox" rel="darwin" href="image/darwin-pic6-big.jpg"><img src="image/darwin-pic6-small.jpg" width="120" height="80"></a> <a class="fancybox" rel="darwin" href="image/darwin-pic2-big.jpg"><img src="image/darwin-pic2-small.jpg" width="120" height="80"></a>  <a class="fancybox" rel="darwin" href="image/darwin-pic3-big.jpg"><img src="image/darwin-pic3-small.jpg" width="120" height="80"></a>  <a class="fancybox" rel="darwin" href="image/darwin-pic4-big.jpg"><img src="image/darwin-pic4-small.jpg" width="120" height="80"></a>     
    </p></div> 


</div> 
<div class="container_panel"> 
<div class="panels" id="panel2">KAKADU 
    <p><a class="fancybox" rel="kakadu" href="image/kakadu-pic2-big.jpg"><img src="image/kakadu-pic2-small.jpg" width="120" height="80"></a><a class="fancybox" rel="kakadu" href="image/kakadu-pic3-big.jpg"> <img src="image/kakadu-pic3-small.jpg" width="120" height="80"></a><a class="fancybox" rel="kakadu" href="image/kakadu-pic-big1.jpg"><img src="image/kakadu-pic-small1.jpg" width="120" height="80"></a><a class="fancybox" rel="kakadu" href="image/kakadu-pic-big4.jpg"> <img src="image/kakadu-pic-small4.jpg" width="120" height="80"></a></p> 
</div> 
</div> 
<div class="container_panel"><div class="panels" id="panel3">ALICE 
    <p><a class="fancybox" rel="alice" href="image/alice-big1.JPG"><img src="image/alice-small1.jpg" width="120" height="80"></a> <a class="fancybox" rel="alice" href="image/alice-big2.jpg"><img src="image/alice-small2.jpg" width="120" height="80"></a><a class="fancybox" rel="alice" href="image/alice-big3.jpg"><img src="image/alice-small3.jpg" width="120" height="80"></a> <a class="fancybox" rel="alice" href="image/alice-big4.jpg"><img src="image/alice-small4.jpg" width="120" height="80"></a></p> 
    </div></div> 

警告：當您點擊菜單上的太多，事件的slideToggle（）做×時間。

所以你必須使用。 stop（）.slideToggle（）

希望有所幫助。