jQuery slideToggle()

Question

这是我的网站：http://www.noor-azmi.com/nt/

如您所见，将有3个div：

• 点击达尔文图片库
• 点击Kakadu图片库
• “点击爱丽丝斯普林斯图片库”

点击时，它应该滑下一个带有图像缩略图的div。

问题是当您单击“图片库”时，“达尔文图片库”将滑落。当我点击“点击爱丽丝斯普林斯图片库”时也是如此。

只有当我从达尔文，卡卡杜，爱丽丝斯普林斯逐一点击它时，它才是正确的，但如果我先点击卡卡杜或爱丽丝泉，而不点击达尔文，问题就会发生。

为什么会这样呢？下面是我的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

我为你做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时间。

所以你必须使用.stop().slideToggle()

希望这能有所帮助。

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>