在點擊後展開div，然後再次點擊並恢復正常

對於我製作的網站，我在寬度爲20％的容器中放置了5個div。我想要做的是一個幫助我做一件簡單事情的函數：當我點擊其中一個div時，我希望該div變得更寬，比如40％，其他div從容器變小，比如15％，當我再次點擊相同的div以恢復正常，並在從div跳轉到另一個時保持轉換。在點擊後展開div，然後再次點擊並恢復正常

我有一個例子，但我在開始與JS，我不會從那裏得到它。我想要的是一個簡單的功能來做同樣的事情。

這裏是例子：https://wellingborough.fluencycms.co.uk/

來源

2017-02-19 Alexandru Dincă

請添加您已使用的代碼 – 2017-02-19 09:16:30

@gerdi我試過這樣的：$（'＃quick> div.quicklink'）。click（function（）{ \t $（this）.animate（{width：「40 ％）}，「slow」）。siblings（）。animate（{'width'：'15％'}，「slow」）; }）; –

一個小更新關於kdureidy anwser： - 它不「切換」的狀態，如果你再次點擊 - 它並不需要的「盒子」的數量考慮

下面是一個改進版本：

$('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/

來源

2017-02-19 10:11:26 Booster2ooo

謝謝，隊友！它運作良好。上帝保佑你們！ ☺ –

像這樣：你需要給所有div同一類能夠重置有寬度，使用javascript針對點擊div來改變寬度，也可以使用過渡使其動畫順利。

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

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

https://jsfiddle.net/5s3urL96/

來源

2017-02-19 09:27:07 kdureidy

謝謝！看起來很酷，但是當我再次點擊一個框時，我想讓所有div恢復到20％的正常寬度。 –

這很簡單，使用新的類名爲擴展，並檢查它 – kdureidy

https://jsfiddle.net/5s3urL96/5/ – kdureidy

在點擊後展開div，然後再次點擊並恢復正常

回答

相關問題