切换内联Div JQuery的高度

Question

我在设置div高度的动画时被卡住了.css float:left有多个div，当我click特定的div时，其高度应该增加。他们要更改位置。我想要的是target div下方的div应该向下移动而不影响其他div。

小提琴

这是代码。

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

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

 <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> 

Answer 1

您将需要清除每个新行上的浮点数。 我建议从float: left;更改它float: left; display: inline-block; ，并且别忘了添加vertical-align: top; 。

div {
  width: 100px;
  height: 100px;
  border: 2px solid;
  margin: 10px;
  display: inline-block;
  vertical-align: top;
}

的jsfiddle

Answer 2

在不影响周围div位置的情况下切换元素高度的一种方法是将项目绝对定位在现有div中，然后切换该高度。

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

 div { height: 100px; width: 100px; float: left; margin: 10px; position: relative; } span { position: absolute; width: 100%; height: 100%; border: 2px solid; } 

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

Answer 3

 $( "article" ).click(function() { if ( $(this).height() != 300) $( this ).animate({ height: 300 }, 1000 ); else $( this ).animate({ height: 200 }, 1000 ); }); 

 .column { float: left; width: 45%; /* or fixed amount */ margin-right: 5%; /* or fixed amount */ } article { border:1px solid; margin-bottom: 24px; background-color: #f6f6f8; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="column"> <article> <h2>Phasellus Molestie Magna</h2> <p>Sed molestie augue sit amet leo consequat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.</p> </article> <article> <h2>Ut In Nulla Enim</h2> <p>Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non.</p> </article> <article> <h2>Curabitur Vulputate</h2> <p>In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim.</p> </article> <article> <h2>Suspendisse Dictum Feugiat Nisl</h2> <p>Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia.</p> </article> </div> <div class="column"> <article> <h2>Donec Congue</h2> <p>Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent.</p> </article> <article> <h2>Proin Quis Tortor</h2> <p>Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla.</p> </article> <article> <h2>Praesent Id Metus Massa, Ut</h2> <p>Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa.</p> </article> </div> 

刚刚在这里更新了一个小提琴..它可能就是您想要的： code http://jsfiddle.net/dssoft32/BqQF3/2/

Answer 4

这是使用列的解决方案。 您可以调整窗口大小，并重新填充列：

 var $boxes; $(document).ready(function () { $boxes = $(".box"); setupColumns(); $(window).on("resize", setupColumns); }); function setupColumns() { var $columnwrapper = $("#columns"); var w = $("<div>").addClass("column").width(); var cnt = Math.floor($columnwrapper.width() / w); var cols = []; for (var i = 0; i < cnt; i++) { var $col = $("<div>").addClass("column"); cols.push($col); } $columnwrapper.append(cols); var cnt = 0; $boxes.each(function () { $(this).detach().appendTo(cols[cnt]); cnt = (cnt + 1) % cols.length; }); } $(".box").click(function() { if ($(this).height() != 100) $(this).animate({ height: 100 }, 1000); else $(this).animate({ height: 150 }, 1000); }); 

 .column { width: 114px; float: left } .box { height: 100px; width: 100px; border: 2px solid; margin-bottom: 10px } 

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

Answer 5

您还应该更改条件：

if ($(this).height() != 100)

变成这样的东西：

if ($(this).hasClass( "div-100" ))

仅仅因为在某些情况下$(this).height() <> 100 。 例如，对于Windows 56中的显示器，Chrome 56.0.2924.87（x64）和DPI缩放级别：

• 缩放比例90％- $(this).height() = 99.99999725097656
• 缩放等级100％- $(this).height() = 100.00000457763672
• 缩放等级110％- $(this).height() = 99.99999576416016