Question

我有一个包含圆角的HTML列表，列表项具有不同的背景颜色，列表项可以通过JavaScript切换：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

问题：隐藏最后一项（最后一个孩子）时，底部的圆角消失。我尝试将圆角添加到父级（#menu），但由于孩子们有背景颜色，所以它不起作用。

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

Answer 1

我将CSS更改为此（您注意到我刚刚将border-radius移动到完整列表而不是单个列表项，并添加了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;
}

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

1 个答案: