jquery - 使用jQuery切换时如何防止额外的点击

Question

我正在使用切换效果来显示幻灯片，该幻灯片用作选择啤酒制造商的快速视觉选择器。这方面的一个例子可以在这里找到：

http://srperrott.silverjerk.com/products/domestic/millercoors

问题是，我必须有效地单击所选触发器两次才能使切换生效。这是我的代码：

$(document).ready(function(){
    $(".quick-brew-header").toggle(function(){
        $(".zone-preface-wrapper").animate({height:40},40);
    },function(){
        $(".zone-preface-wrapper").animate({height:165},40);
    });
});

在我的 CSS 中，我声明 .zone-preface-wrapper 的起始高度为 40px。

似乎应该有一个简单的解决方法。我绝对会感谢任何帮助找到解决此问题的方法。

Answer 1

如果元素从 40 开始，则您的第一个参数动画为 40 - 所以您看不到任何变化。

通过切换两个切换处理程序，您应该会在第一次单击时看到更改为 165。

$(".quick-brew-header").toggle(
    function() {
        $(".zone-preface-wrapper").animate({height:165},40);
    },
    function() {
        $(".zone-preface-wrapper").animate({height:40},40);
    }
);