Question

对于我制作的网站，我在容器中有5个div，宽度为20％。我想要做的是一个函数，它帮助我做一个简单的事情：当我点击其中一个div时，我希望div变宽，如40％，另一个div从容器变小，比如15％，当我再次点击同一个div以恢复正常，并在我从div到另一个div时保持转换。

我有一个例子，但我刚开始使用JS而且我从那里得到的东西不多。我想要的是一个简单的功能来做同样的事情。

以下是示例：https://wellingborough.fluencycms.co.uk/

Answer 1

像这样：你需要赋予所有div相同的类以便能够重置宽度，并使用javascript target单击的div来改变宽度，也可以使用transition来使其平滑地动画。

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

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

https://jsfiddle.net/5s3urL96/

Answer 2

关于kdureidy anwser的一点点更新： - 它没有＆＃34;切换＆＃34;如果你再次点击，状态 - 它没有采取＆＃34;盒子的数量＆＃34;考虑到

以下是改进版本：

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

在单击时展开div并缩小其他对象并在再次单击后恢复正常

2 个答案: