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

这是因为你点击元素后附加了切换功能，避免.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");
          });
    });

Answer 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");
});

Answer 3

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

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

Answer 4

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

然后使用

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

切换任何风格

Answer 5

是的，您的toggle功能不正确。这是一个有效的例子：

http://jsfiddle.net/LsdUQ/

JQuery与.toggle .css

5 个答案: