クリックしてdivを展開し、別のものを縮小してもう一度クリックすると正常に戻る

Question

私が作ったサイトでは、幅20％のコンテナに5つのdivがあります。私がしたいことは、簡単なことで私を助ける関数です：divの1つをクリックすると、そのdivが40％のように広くなり、他のdivがコンテナから15％のように小さくなるようにしたいときと、同じdivをもう一度クリックすると、通常の状態に戻り、あるdivから別のdivに移動するときに遷移を維持します。

私は例を持っていますが、私はJSで始まります。私はそこから多くを得ることはありません。 私が欲しいのは、同じことをする簡単な機能です。ここで

は一例です。このようhttps://wellingborough.fluencycms.co.uk/

Answer 1

少しアップデート： - それはあなたが再び ない「トグル」状態をクリックしない場合 - それは、アカウント

に「ボックス」の数を取ることはありません。ここ

改良版である：

$('body').on('click', '.box', function(e) { 
    var $target = $(this) 
    , targetIsActive = $target.hasClass('active') 
    , $boxes = $('.box') 
    , boxesCount = $boxes.length 
    , inactiveWidth = 100/boxesCount 
    , activeWidth = inactiveWidth * 2 
    , othersActiveWith = (100 - activeWidth)/(boxesCount - 1) 
    ; 
    if(!targetIsActive) { 
     $boxes.removeClass('active').css('width', othersActiveWith + '%'); 
     $target.addClass('active').css('width', activeWidth + '%'); 
    } else { 
     $boxes.removeClass('active').css('width', inactiveWidth + '%'); 
    } 
}); 

https://jsfiddle.net/xw1e34yy/

Answer 2

： あなたがそこに幅をリセットできるようにするには、すべてのdivに同じクラスを与える必要があり、幅を変更するにはjavascriptをターゲットにクリックされたdiv要素を使用して、またへの移行を使用しますそれをスムーズにアニメーション化する。 kdureidy anwserに関する

$(".box").on("click", function(e) { 
    $(".box").css("width", "15%"); 

    $(e.currentTarget).css("width", "40%"); 
}) 

https://jsfiddle.net/5s3urL96/