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

问题来自于在操纵DOM的JS之前加载的CSS。尝试使用反向逻辑。添加顶部边框并删除第一个项目的边框。这样，如果您有任何列表项，边框会自行重新排序并且样式仍然存在。

＆＃13;

31 lines (28 sloc)  736 Bytes
/**
 * Creates an array of values by running each element of `array` thru `iteratee`.
 * The iteratee is invoked with three arguments: (value, index, array).
 *
 * @since 5.0.0
 * @category Array
 * @param {Array} array The array to iterate over.
 * @param {Function} iteratee The function invoked per iteration.
 * @returns {Array} Returns the new mapped array.
 * @example
 *
 * function square(n) {
 *   return n * n
 * }
 *
 * map([4, 8], square)
 * // => [16, 64]
 */
function map(array, iteratee) {
  let index = -1
  const length = array == null ? 0 : array.length
  const result = new Array(length)

  while (++index < length) {
    result[index] = iteratee(array[index], index, array)
  }
  return result
}

export default map

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: