jquery - 可扩展列表，在突出显示时跳转一个像素

Question

我有这个列表 FIDDLE

我想弄清楚为什么，如果您突出显示 B 组中的一个元素，它会向下移动一个像素。
这不会发生在 A 组。为什么？

这是 JQuery

$(".expandListHeader").click(function () {
    $header = $(this);
    $content = $header.next();
    $content.find('.expandListContentRow').toggle("slow"); });

$( ".expandListItem" ).click(function() {
    $( this ).toggleClass( "highlight" ); 
});

突出显示的 CSS。

  .highlight{
    margin-top: -1px;
    margin-bottom: -1px;
    border-top:1px solid #bbb;
    border-bottom:1px solid #bbb;
    background: #FFEC80;
  }

Answer 1

因为您正在为突出显示的 div 应用边框。普通盒模型将内容计为 100% 高度，然后为其添加填充和 1px 边框。由于一开始您的边框未定义，因此您的 div 总高度较小。一旦你突出显示你的 div，它的高度将增加 +1px，因为边框被添加到内容 height + padding。

要么将透明边框应用于.expandListItem - border-bottom: 1px solid transparent;

.expandListItem {
    width: 340px;
    padding-left:10px; 
    font-size:13px;
    float: left;
    margin-right: 20px; 
    padding-left: 20px; 
    padding-top: 5px;
    padding-bottom: 5px;
    margin-top: -1px;
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
}

http://jsfiddle.net/easwee/jkx1wu0n/1/