javascript - 单击展开一个div并缩小另一个div并在再次单击后恢复正常

Question

对于我制作的网站，我在一个容器中有 5 个 div，宽度为 20%。我想要做的是一个可以帮助我完成一件简单事情的功能:当我单击其中一个 div 时，我希望该 div 变得更宽，比如 40%，而容器中的其他 div 变小，比如 15%，当我再次单击同一个 div 以恢复正常并在我从一个 div 转到另一个 div 时保持过渡。

我有一个例子，但我是从 JS 开始的，我并没有从那里得到太多。我想要的是一个简单的函数来做同样的事情。

示例如下:https://wellingborough.fluencycms.co.uk/

Answer 1

关于 kdueridy 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/