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/

Answer 2

working demo

我删除了第43行的<br>

            <div class="expandListHeader">
                <div class="Collapse"></div>
                <div class="expandListHeaderRow"><span>B</span></div>
            </div>
            <div class="expandListContent">
                <div class="expandListContentRow contentCol">
                    <div class="expandListItem">Barney</div>
                    <div class="expandListItem">Ben</div>
                    <div class="expandListItem">Billy</div>
                    <div class="expandListItem">Boris</div>
                    <div class="expandListItem">Bruce</div>
                    <div class="expandListItem">Bryse</div>


                    <div class="expandListItem">Buck</div>
/*br was here*/
                    </div>
                </div>
            </div>
        </div>
     </div>

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

2 个答案: