Question

我正在尝试使用jquery将一个元素切换为自己的大小......然而它的行为相当奇怪，当我第一次单击它时它很棒（很棒）然而当我再次点击它时我不想它回到它的原始大小，但它回到它的原始大小，然后再次扩展...在第三次点击它做同样的...第四次合同，扩展，合同，然后再次扩大......等等！

有没有办法避免这种情况，我猜这是因为它解释了大盒子上的点击，只需点击一下大片，然后点击一下小片？

这是我的代码：）

$(document).ready(function(    
$("#box").click(function(){
 $("#box").toggle(function(){
        $("#box").animate({width:960},"fast","swing");
        $("#box").animate({height:500},"fast","swing");},
    function(){
        $("#box").animate({height:20},"fast","swing");
        $("#box").animate({width:20},"fast","swing");
    });
});

});

Answer 1

toggle是一个点击处理程序。你不需要将它包装在click中：它已经为你完成了。实际上，每次单击元素时，您都会重新绑定toggle代码，因此数字会增加。

$(document).ready(function (
$("#box").toggle(function () {
    $(this).animate({width: 960}, "fast", "swing");
    $(this).animate({height: 500}, "fast", "swing");
}, function () {
    $(this).animate({height: 20}, "fast", "swing");
    $(this).animate({width: 20}, "fast", "swing");
});
});

请注意，我已将重复的#box调用更改为this，这要快得多。我也可以将两组两行更改为两个单animate次调用（.animate({width: 960, height: 500})），但可能需要改变行为......

如何使用jquery </div>设置<div>以切换自己的大小

1 个答案: