html - 添加圆 Angular 以列出隐藏最后一个元素的位置

Question

我有一个带有圆 Angular 的 HTML 列表，列表项具有不同的背景颜色，列表项可以通过 JavaScript 切换:

$(function() {
  $("#menu .header").on("click", function() {
    $(this).nextUntil(".header").toggle();
  });
});

body {
  font: medium sans-serif;
}
#menu {
  padding: 0;
  list-style-type: none;
}
#menu li {
  padding: 1em;
}
/**** colors ****/
#menu li {
  color: #FFF;
  background-color: #000;
}
#menu li.header {
  color: #FFF;
  background-color: #09F;
}
/**** corners ****/
#menu li:first-child {
  border-radius: 1em 1em 0 0;
}
#menu li:last-child {
  border-radius: 0 0 1em 1em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<ul id="menu">
  <li>Menu 1</li>
  <li class="header">Menu 2 (click to toggle)</li>
  <li>Menu 2-1</li>
  <li>Menu 2-2</li>
  <li>Menu 2-2</li>
  <li class="header">Menu 3 (click to toggle)</li>
  <li>Menu 3-1</li>
  <li>Menu 3-2</li>
  <li>Menu 3-3</li>
</ul>

问题:当最后一个元素(last-child)被隐藏时，底部的圆 Angular 消失了。我尝试向父项 (#menu) 添加圆 Angular ，但它不起作用，因为子项具有背景颜色。

我希望最后一个可见的 child 有圆 Angular 。实现预期结果的最佳无 javascript 解决方案是什么？

Answer 1

我将 CSS 更改为此(您会注意到我只是将 border-radius 移动到完整列表而不是单个列表项并添加了 overflow: hidden 以防止 Angular 落隐藏在列表项后面):

body {
  font: medium sans-serif;
}
#menu {
  padding: 0;
  list-style-type: none;
  border-radius: 1em;
  overflow: hidden;
}
#menu li {
  padding: 1em;
}
/**** colors ****/
#menu li {
  color: #FFF;
  background-color: #000;
}
#menu li.header {
  color: #FFF;
  background-color: #09F;
}