jquery - 如何在显示和隐藏的元素之间放置边框？

Question

我正在使用这种样式在列表元素之间放置一个边框。元素是div。

.event-type:not(:last-child) {
    border-bottom: 1px solid #000;
}

我在 JavaScript 中显示和隐藏这些元素。问题是当我隐藏最后一个元素时，列表底部有一个边框。有没有办法单独使用 CSS 来解决这个问题？

<div class='event-type'>One</div>
<div class='event-type'>Two</div>
<div id='test' class='event-type'>Three</div>

<script>
    $('#test').hide();
</script>

Answer 1

问题来自于您的 CSS 在操作 DOM 的 JS 之前加载。尝试使用反向逻辑。为第一项添加顶部边框并移除边框。这样，如果您有任何列表项，边框会自行重新排序并且样式保持不变。

const lc = document.querySelector("#lastid");
lc.style.display = 'none';

li {
    border-top: 1px solid #eee;
}
li:first-child {
    border-top: none;
}

<ul>
  <li>List 1i</li>
  <li>List 2i</li>
  <li>List 3i</li>
  <li>List 4i</li>
  <li>List 5i</li>
  <li>List 6i</li>
  <li>List 7i</li>
  <li>List 8i</li>
  <li>List 9i</li>
  <li id="lastid">List 10i</li>
</ul>