Question

如您所见，将有3 div s：

＆＃34;点击Darwin图片库＆＃34;
＆＃34;点击卡卡杜图片库＆＃34;
＆＃34;点击Alice Springs图片库＆＃34;

单击时，它应向下滑动带有图像缩略图的div。

问题是当您点击＆＃34;点击卡卡杜图片库＆＃34;，＆＃34;达尔文图片库＆＃34;会滑下来。当我点击＆＃34; Click for Alice Springs图片库＆＃34;

时也是如此

只有当我从达尔文，卡卡杜，艾丽斯斯普林斯一个一个地点击它时，它才会正确，但如果我先点击卡卡杜或爱丽丝泉而不点击达尔文，问题就会出现

为什么？下面是我的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属性。

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结构的一个问题。您的图库面板应位于相应的＃div＆＃39; s框内，或者您可以尝试绝对定位它们。

就像现在一样，当你隐藏其中一个图库div时，可见的div将出现在隐藏div的左侧空白处。

jQuery slideToggle（）

4 个答案: