[英]jQuery slideToggle()
This is my website: http://www.noor-azmi.com/nt/ 这是我的网站: http : //www.noor-azmi.com/nt/
As you can see there will be 3 div
s: 如您所见,将有3 div
s:
When clicked it should slide down a div with image thumbnails. 单击后,应将带有图像缩略图的div向下滑动。
Problem is when you click "Click for Kakadu image gallery", the "Darwin image gallery" will slide down. 问题是,当您单击“ Click for Kakadu图片库”时,“ Darwin图片库”将向下滑动。 So does when I click the "Click for Alice Springs image gallery" 单击“ Click for Alice Springs图片库”时也是如此
Only when I click it one by one from Darwin, Kakadu, Alice Springs then it will be correct but if I am to click Kakadu or Alice Springs first without clicking on Darwin, the problems occurs 只有当我从达尔文,卡卡杜,爱丽丝泉逐个单击它时,它才是正确的,但是如果我先不单击达尔文就单击卡卡杜或爱丽斯泉,就会出现问题
Why is that? 这是为什么? Below is my jQuery code. 以下是我的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");
});
});
I do a jsFiddle for you. 我为您做一个jsFiddle。
https://jsfiddle.net/n6391fdv/1/ https://jsfiddle.net/n6391fdv/1/
Its works. 其作品。
$('#darwin_button,#kakadu_button,#alice_button').click(function(){
$('.panels').slideUp();
$('.panels').hide();
$('#panel'+$(this).attr('target')).stop().slideToggle();
});
And html 和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>
Warning : When you click too much on your menu, the event slideToggle() do x time. 警告:当您在菜单上单击太多时,事件slideToggle()会x时间。
So you must use . 所以你必须使用。 stop ().slideToggle() 停止 ().slideToggle()
Hope that helps. 希望能有所帮助。
It is a HTML structure problem. 这是一个HTML结构问题。
Get your div.panels
in the correspondant #box1, #box2 and #box3
and it should be fine. 将div.panels
放入对应的#box1, #box2 and #box3
,应该没问题。
And also, you will not have to put a float: left;
而且,您将不必float: left;
property on div.panels
with this method. 使用此方法在div.panels
上div.panels
属性。
You can include your panel div in the button div. 您可以将面板div包含在按钮div中。 Try something like this : 尝试这样的事情:
<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>
As Vincent said, it's a problem with your HTML's structure. 正如文森特所说,这是HTML结构的问题。 Your gallery panels should be inside the corresponding box# div's, or you could try positioning them absolutely. 您的图库面板应位于相应的box#div内,或者您可以尝试完全定位它们。
As it is now, when you hide one of the gallery div's, the visible divs will appear in the whitespace left from the hidden divs. 现在,当您隐藏图库div之一时,可见的div将出现在隐藏的div左侧的空白处。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.