JQuery与.toggle .css

Question

我有一个显示200像素的div。当我点击div中的图像时，我想显示1000px。 然后再次点击时再次接近200px。

这是我的代码：

<script type="text/javascript"> 
$(document).ready(function() { 
    // shows the slickbox DIV on clicking the link with an ID of "slick-show" 

$('#slickbox').css("height", "200px");  
$('#slick-show').click(function() { 
     $('#slickbox').toggle(function() { 
    $("#slickbox").css("height", "1000px"); 
}, function() { 
    $("#slickbox").css("height", "200px"); 
     }); 
}); 
return false; 

}); 
</script> 

<div id="slickbox" style="height: 1000px;"> 
<p style="text-align: center;"> 
<a id="slick-show" href="#"><img src="/ImageVaultFiles/id_468115/cf_69211/Happy_monday14-5.jpg" border="0" alt="Happy_monday14-5" /></a></p> 
</div> 

的代码工作，但我也有第一次开启后每一次双击。对于不同的样式或宽度或高度或任何

和

Answer 1

你滥用toggle。

http://api.jquery.com/toggle-event/

描述：绑定两个或更多个处理程序来匹配的元素，可以在交替的点击执行。

toggle应该只调用一次。它将绑定点击处理程序，这将触发交替点击。你正在做的是每次点击时重新绑定点击处理程序。你真正想要做的是这样的：

$('#slickbox').css("height", "200px");  
$('#slick-show').toggle(function() { 
    $("#slickbox").css("height", "1000px"); 
}, function() { 
    $("#slickbox").css("height", "200px"); 
}); 

Answer 2

使用CSS类，然后使用

http://api.jquery.com/toggleClass/

用于切换任何风格

Answer 3

此监守你连接切换功能，点击元素后，应避免。点击：

$(function() { 
     // shows the slickbox DIV on clicking the link with an ID of "slick-show" 

    $('#slickbox').css("height", "200px");  
    $('#slick-show').toggle(function() { 
     $("#slickbox").css("height", "1000px"); 
    }, function() { 
     $("#slickbox").css("height", "200px"); 
      }); 
    }); 

Answer 4

的。点击（）和.toggle（）是多余的 - .toggle（）假定有人将点击一个元素。请参阅文档中的说明：“将两个或多个处理程序绑定到匹配的元素，以便在其他点击上执行。”刚刚离开了。点击（），你会得到你想要的行为..

$(document).ready(function() { 
    $('#slickbox').css("height", "200px"); 
    $('#slick-show').toggle(function() { 
     $("#slickbox").css("height", "1000px"); 
    }, function() { 
      $("#slickbox").css("height", "200px"); 
     }); 
})​ 

Answer 5

是啊，你toggle函数不正确。这里有一个工作示例：

http://jsfiddle.net/LsdUQ/