jQuery slideToggle（）

Question

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

如您所見，將有3 div s：

• “點擊查看達爾文圖片庫”
• “單擊以獲取卡卡杜圖片庫”
• “點擊查看愛麗斯泉圖像庫”

單擊后，應將帶有圖像縮略圖的div向下滑動。

問題是，當您單擊“ Click for Kakadu圖片庫”時，“ Darwin圖片庫”將向下滑動。 單擊“ Click for 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

我為您做一個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（）會x時間。

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

希望能有所幫助。

Answer 2

這是一個HTML結構問題。

將div.panels放入對應的#box1, #box2 and #box3 ，應該沒問題。

而且，您將不必float: left; 使用此方法在div.panels上div.panels屬性。

Answer 3

您可以將面板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 4

正如文森特所說，這是HTML結構的問題。 您的圖庫面板應位於相應的box＃div內，或者您可以嘗試完全定位它們。

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