1

我有一个显示 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>

代码有效，但我必须在第一次打开后每次双击。

4

5 回答 5

3

这是因为您在单击元素后附加切换功能，避免.click：

   $(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");
          });
    });
于 2012-05-11T13:41:47.583 回答
2

你在滥用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");
});
于 2012-05-11T13:41:28.710 回答
1

.click() 和 .toggle() 是多余的—— .toggle() 假设有人要点击一个元素。请参阅文档中的描述：“将两个或多个处理程序绑定到匹配的元素，以在交替单击时执行。” 只需省略 .click() 即可获得所需的行为..

$(document).ready(function() {
    $('#slickbox').css("height", "200px");   
    $('#slick-show').toggle(function() {
        $("#slickbox").css("height", "1000px");
    }, function() {
            $("#slickbox").css("height", "200px");
      });   
})​
于 2012-05-11T13:42:45.570 回答
0

为不同的样式或宽度或高度或任何东西使用 CSS 类

然后使用

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

用于切换任何风格

于 2012-05-11T13:36:22.947 回答
0

是的，你的toggle功能不正确。这是一个工作示例：

http://jsfiddle.net/LsdUQ/

于 2012-05-11T13:49:42.860 回答