0

バカなことをしているのだろうが、今日はなぜか考えられない。

私には 3 つの div があり、それらはすべて「staff_member」のクラスを持っています。div をクリックすると、その幅が拡大し、他の 2 つの div が縮小します。別の div をクリックすると、この div が展開され、他の div が縮小されます。これはすべてうまくいきます。ただし、コールバック関数が必要なので、展開された div をもう一度クリックすると、3 つの 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 に答える