我有一个显示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>
代码工作正常,但是第一次打开后每次都要双击。
最佳答案
您正在滥用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");
});
关于jquery - 带有.toggle .css的jQuery,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/10552365/