0

我可能正在做一些愚蠢的事情，但由于某种原因我今天无法思考。

我有三个 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});
    });

});
4

1 回答 1

0

要点击展开的部分，做一些不同的事情，你只需要在点击处理程序中检查点击的项目是否已经展开：

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

您没有在代码中显示正常宽度是多少，所以我将其留给您填写。

于 2012-08-28T01:02:24.853 回答