ul左浮動列表上的邊框底部問題，​​具有打開框功能

Question

我之前曾問過一個問題：

Li向左浮動，長度動態：最后一行沒有邊框底部

感謝您的回答，但是，當我添加“打開框功能”時，邊框底部出現了問題。

這是代碼：

 $('li').click(function() { if (!$('div.' + $(this).index()).length) { for (a = $('li').length - 1; a >= 0; a--) { if ($('li').eq(a).offset().top == $(this).offset().top) { $('li').eq(a).after('<div class="' + $(this).index() + '">' + $(this).html() + '</div>'); $('div:not(.' + $(this).index() + ')').remove(); break; /*$('div.' + $(this).index()).slideDown(200); $('div:not(.' + $(this).index() + ')').slideUp(200, function() { $(this).remove(); });*/ } } } else { $('div.' + $(this).index()).slideUp(200, function() { $(this).remove(); }); } }) 

 ul { display: block; width: 100%; margin: 0; padding: 0 } li { display: block; width: 33%; height: 120px; float: left; margin: 0; padding: 0; border-bottom: #ccc 1px solid; box-sizing: border-box; background: #fee; } ul:after { content: ''; display: block; clear: both; } /*li.no-border { border-bottom: 0px; }*/ li:nth-last-child(4) ~ li:nth-child(3n+1), li:nth-last-child(4) ~ li:nth-child(3n+1) ~ li{ border-bottom: 0px; } div { background: #ccc; height: 150px; width: 100%; clear: both; display: block } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> </ul> 

請幫忙。 謝謝。

Answer 1

也許您可以繪制邊框頂部（或陰影），並通過負邊距(or position:relative or translate() )將第一行的邊框隱藏起來並溢出。

ul {
overflow:hidden;
}

li {
  margin:-1px 0 0;
  box-shadow:0 -1px #ccc;

}

下面的演示

 $('li').click(function() { if (!$('div.' + $(this).index()).length) { for (a = $('li').length - 1; a >= 0; a--) { if ($('li').eq(a).offset().top == $(this).offset().top) { $('li').eq(a).after('<div class="' + $(this).index() + '">' + $(this).html() + '</div>'); $('div:not(.' + $(this).index() + ')').remove(); break; /*$('div.' + $(this).index()).slideDown(200); $('div:not(.' + $(this).index() + ')').slideUp(200, function() { $(this).remove(); });*/ } } } else { $('div.' + $(this).index()).slideUp(200, function() { $(this).remove(); }); } }) 

 ul { display: block; width: 100%; margin: 0; padding: 0; overflow:hidden; } li { display: block; width: 33%; height: 120px; float: left; padding: 0; margin:-1px 0 0px; box-shadow:0 -1px #ccc; box-sizing: border-box; background: #fee; } ul:after { content: ''; display: block; clear: both; } div { background: #def; height: 150px; width: 100%; clear: both; display: block } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> </ul>