添加圆角以列出隐藏最后一个元素的位置答案

【问题标题】：Add round corners to list where last element is hidden添加圆角以列出隐藏最后一个元素的位置
【发布时间】：2014-12-21 18:02:52
【问题描述】：

我有一个带有圆角的 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）被隐藏时，底部的圆角消失了。我尝试为父级（#menu）添加圆角，但由于子级有背景颜色，它不起作用。

我希望最后一个可见的孩子有圆角。实现预期结果的最佳 no-javascript 解决方案是什么？

【问题讨论】：

“没有 jQuery”是否意味着没有 JavaScript，或者只要我不使用外部库，我可以使用 JavaScript 来回答这个问题吗？
好吧，那我也不知道怎么做。
这是什么原因？你已经在使用 jQuery 来切换元素了。
@Niloct 我有特定的需求。假设切换是由我不能（或不想）更改的脚本处理的。
我有好消息，也有坏消息。不幸的是，后者多于前者。好消息是，它可以用 CSS 3 完成，只要元素被 JavaScript 隐藏（这里似乎就是这种情况）。坏消息是它是一个非常丑陋的解决方案，而且您的问题与这个问题重复：stackoverflow.com/questions/5275098/…。（你会找到我在那里提到的解决方案。）很抱歉，但投票结束。

标签： html css

【解决方案1】：

我会将 CSS 更改为此（您会注意到我只是将边框半径移动到完整列表而不是单个列表项，并添加了 overflow: hidden 以防止角落隐藏在列表项后面）：

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;
}

【讨论】：

隐藏溢出很麻烦，但我可以忍受。