Question

这可能看起来是一个非常基本的问题，但我在设置div的高度时遇到困难。有多个div与css float:left。当我click特定div时高度应该增加。但是因为它的高度正在增加所有其他div的位置也在变化。我不希望它们改变它们的位置。我想要的是target div下面的div应该移动不影响其他div。

Fiddle

这是代码。

＆＃13;

$("div").click(function() {
  if ($(this).height() != 100)
    $(this).animate({
      height: 100
    }, 1000);
  else
    $(this).animate({
      height: 150
    }, 1000);
});

＆＃13;

div {
  height: 100px;
  width: 100px;
  border: 2px solid;
  float: left;
  margin: 10px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  HELLO WORLD 1
</div>
<div>
  HELLO WORLD 2
</div>
<div>
  HELLO WORLD 3
</div>
<div>
  HELLO WORLD 4
</div>
<div>
  HELLO WORLD 5
</div>
<div>
  HELLO WORLD 6
</div>
<div>
  HELLO WORLD 7
</div>
<div>
  HELLO WORLD 8
</div>
<div>
  HELLO WORLD 9
</div>
<div>
  HELLO WORLD 10
</div>

＆＃13;

Answer 1

我认为这正是你所期望的几乎不可能，但如果是这样的话，可能很难实现。但是，如果您使用flexbox进行一些jQuery和css转换，您将在每个屏幕尺寸上获得完全响应式方案。

<强> Jsfiddle example

$(".container").find('div').click(function() {
  $(this).toggleClass('show');
});

.container div {
  height: 100px;
  width: 100px;
  border: 2px solid;
  margin: 10px;
  transition: .5s ease height;
}

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: flex-start;
  align-items: flex-start;
}

.show {
  height: 150px !important;
  transition: .5s ease height;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='container'>
  <div>
    HELLO WORLD 1
  </div>
  <div>
    HELLO WORLD 2
  </div>
  <div>
    HELLO WORLD 3
  </div>
  <div>
    HELLO WORLD 4
  </div>
  <div>
    HELLO WORLD 5
  </div>
  <div>
    HELLO WORLD 6
  </div>
  <div>
    HELLO WORLD 7
  </div>
  <div>
    HELLO WORLD 8
  </div>
  <div>
    HELLO WORLD 9
  </div>
  <div>
    HELLO WORLD 10
  </div>
</div>

Answer 2

嗯，我猜你可以通过在里面添加另一个div来实现，并扩展div的大小：

$(".inner-div").click(function() {
  if ($(this).height() != 100)
    $(this).animate({
      height: 100
    }, 1000);
  else
    $(this).animate({
      height: 150
    }, 1000);
});

div {
  height: 100px;
  width: 100px;
}

.outter-div{
  float: left;
  margin: 10px;
  overflow: visible;
}

.inner-div{
  border: 2px solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outter-div">
  <div class="inner-div">
  HELLO WORLD 1
  </div>
</div>
<div class="outter-div">
  <div class="inner-div">
  HELLO WORLD 2
  </div>
</div>
<div class="outter-div">
  <div class="inner-div">
  HELLO WORLD 3
  </div>
</div>
<div class="outter-div">
  <div class="inner-div">
  HELLO WORLD 4
  </div>
</div>
<div class="outter-div">
  <div class="inner-div">
  HELLO WORLD 5
  </div>
</div>
<div class="outter-div">
  <div class="inner-div">
  HELLO WORLD 6
  </div>
</div>
<div class="outter-div">
  <div class="inner-div">
  HELLO WORLD 7
  </div>
</div>
<div class="outter-div">
  <div class="inner-div">
  HELLO WORLD 8
  </div>
</div>
<div class="outter-div">
  <div class="inner-div">
  HELLO WORLD 9
  </div>
</div>
<div class="outter-div">
  <div class="inner-div">
  HELLO WORLD 10
  </div>
</div>

内联div的动画高度onclick

2 个答案: