我有一些简单的代码(可能是不必要的)麻烦。我有3张图片,当点击时打开下面三个div中的一个。我只是希望能够取消任何先前打开的div上的切换,以便在任何给定时间只能打开一个。
目前,问题在于当第二次点击其中一个按钮时,没有任何反应,因为它取消了切换,而不是打开div。你可以从我糟糕的措辞中看出来,我对此很新,所以要善良!
设置css以使div的高度和不透明度为0开始。
代码:
$(document).ready(function() {
$("#picone").toggle(function() {
$("#divone").animate({
height: 400,
opacity: 1
}, 500);
$("#divtwo, #divthree").animate({
height: 0,
opacity: 0
}, 500);
}, function() {
$("#divone").animate({
height: 0,
opacity: 0
}, 500);
$("#divtwo, #divthree").animate({
height: 0,
opacity: 0
}, 500);
});
});
$(document).ready(function() {
$("#pictwo").toggle(function() {
$("#divtwo").animate({
height: 400,
opacity: 1
}, 500);
$("#divone, #divthree").animate({
height: 0,
opacity: 0
}, 500);
}, function() {
$("#divtwo").animate({
height: 0,
opacity: 0
}, 500);
$("#divone, #divthree").animate({
height: 0,
opacity: 0
}, 500);
});
});
$(document).ready(function() {
$("#picthree").toggle(function() {
$("#divthree").animate({
height: 400,
opacity: 1
}, 500);
$("#divone, #divtwo").animate({
height: 0,
opacity: 0
}, 500);
}, function() {
$("#divthree").animate({
height: 0,
opacity: 0
}, 500);
$("#divone, #divtwo").animate({
height: 0,
opacity: 0
}, 500);
});
});
谢谢:)
答案 0 :(得分:0)
感谢您的反馈。
事实证明,切换功能并不是我想要的。我删除了额外的
(文档)$。就绪(函数(){
喜欢@hsalama建议,并将
分区像@FrançoisWahl建议的事件。.toggle
以下是它的结果:
$(document).ready(function(){
$("#picone").click(function() {
$("#divone").animate(
{height:300, opacity:1}, 500
);
$("#divtwo, #divthree").animate(
{height:0, opacity:0}, 500
);
});
$("#pictwo").click(function() {
$("#divtwo").animate(
{height:300, opacity:1}, 500
);
$("#divone, #divthree").animate(
{height:0, opacity:0}, 500
);
});
$("#picthree").click(function() {
$("#divthree").animate(
{height:300, opacity:1}, 500
);
$("#divone, #divtwo").animate(
{height:0, opacity:0}, 500
);
});
});
谢谢你们:)