2016-03-15 64 views
0

这是我的网站:http://www.noor-azmi.com/nt/的jQuery的slideToggle()

正如你可以看到会有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"); 
    }); 

}); 

回答

0

这是一个HTML结构问题。

得到您的div.panels在相应的#box1, #box2 and #box3它应该没问题。

此外,您将不必使用此方法将float: left;财产置于div.panels上。

0

您可以将您的面板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> 
0

正如文森特所说,这是你的HTML结构的问题。你的画廊面板应该放在相应的盒子里面,或者你可以尝试对其进行绝对定位。

现在,当您隐藏其中一个库div时,可见div将出现在隐藏div的左侧空白处。

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()做×时间。

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

希望有所帮助。