Question

我可能做了一些愚蠢的事情，但出于某种原因我今天想不到。

我有三个div，他们都有一类“staff_member”。单击div时，其宽度应展开，其他两个div缩小。如果单击另一个div，则此div现在应该展开，而其他div则缩小。一切正常。但是，我想要一个回调函数，所以如果再次单击展开的div，它应该将所有三个div返回到正常大小（缩小先前扩展的div并增加收缩的div。）

如果我添加一个回调它什么都不做，如果我尝试将它作为一个单独的函数运行，扩展的div会缩小然后再次展开。

继承我的代码：

jQuery(document).ready(function() {

    var regionWidth = jQuery(".region-panels").width();
    jQuery(".staff_wrapper").css("width",regionWidth*0.84);

    var halfRegion = regionWidth/2;
    var howMany = jQuery(".staff_member").length;
    var makeMeThin = halfRegion/howMany;

    jQuery(".staff_member").css("width",makeMeThin);
    jQuery(".staff_member img").css("cursor", "pointer");

    jQuery(".staff_member").click(function () {
        jQuery(".expanded").removeClass("expanded");
        jQuery(this).addClass("expanded");
        jQuery(".staff_member").not(this).animate({"width":"5%"}, function(){
            jQuery(".expanded").stop().animate({"width":"84%"});
        });
    }, function(){
        jQuery(".staff_member").animate({"width":makeMeThin});
    });

});

Answer 1

要点击展开的部分，执行不同的操作，您只需要在点击处理程序中检查点击的项目是否已经展开：

jQuery(".staff_member").click(function () {
    if (jQuery(this).hasClass("expanded")) {
        // clicked item already expanded, set all back to normal width
        jQuery(".expanded").removeClass("expanded");
        jQuery(".staff_member").animate({"width": "50%"});   // you add right code for setting to normal width
    } else {
        // clicked on item was not already expanded
        jQuery(".expanded").removeClass("expanded");
        jQuery(this).addClass("expanded");
        jQuery(".staff_member").not(this).animate({"width":"5%"}, function(){
            jQuery(".expanded").stop().animate({"width":"84%"});
        });
    }
});

你没有在你的代码中显示正常宽度是什么，所以我会留给你填写。

为什么我不能在这个动画上调用回调

1 个答案: