Question

我仅使用css创建了此可折叠列表，但是在打开<ul>元素时，列表项以某种方式溢出。为了解决这个问题，我需要做什么？

HTML：

.linkslist {
  position: relative;
  background-color: #fff;
}

.linkslist .menu-trigger {
  display: block;
  cursor: pointer;
  padding: 5px;
  border: 1px solid #ddd;
}

.linkslist input[type="checkbox"] {
  position: absolute;
  left: -9999px;
}

.linkslist input[type="checkbox"]+label::after {
  font-size: 14px;
  font-weight: 700;
  color: initial;
  font-weight: normal;
  margin-right: 5px;
  right: 10px;
  top: 50%;
  position: absolute;
  text-decoration: none;
  display: inline-block;
  content: '+';
  transform: translateY(-50%);
}

.linkslist input[type="checkbox"]:checked+label::after {
  content: '-';
}

.linkslist .menu-list {
  list-style: none;
  padding-left: 0;
  margin-top: 0;
}

.linkslist input[type="checkbox"]~ul.menu-list {
  height: 0;
  transform: scaleY(0);
}

.linkslist input[type="checkbox"]:checked~ul.menu-list {
  border: 1px solid #f90; /* For testing */
  margin-top: -1px;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 180;
  width: 100%;
  box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
  height: 100%;
  transform-origin: top;
  transition: transform .2s ease-out;
  transform: scaleY(1);
}

.linkslist .list-group-item {
  position: relative;
  display: block;
  padding: 9px 7px;
  margin-left: 0 !important;
  margin-bottom: -1px;
  background-color: #fff;
  border: 1px solid #ccc;
}

.linkslist .list-group-item a {
  color: inherit;
  display: block;
}

<div class="linkslist">
  <input type="checkbox" id="list-item">
  <label for="list-item" class="menu-trigger">Select</label>
  <ul class="list-group menu-list">
    <li class="list-group-item"><a href="https://www.google.com" title="Google">Google</a></li>
    <li class="list-group-item"><a href="https://www.bbc.co.uk" title="Go to BBC">BBC</a></li>
    <li class="list-group-item"><a href="https://www.facebook.com" title="Go to Facebook">Facebook</a></li>
  </ul>
</div>

See Fiddle here。

谢谢。

Answer 1

位置绝对元素将高度作为标准父级相对元素。将其设置为height:100%而不是height:auto来解决此问题。在下面查看更新的代码段。

.linkslist {
  position: relative;
  background-color: #fff;
}

.linkslist .menu-trigger {
  display: block;
  cursor: pointer;
  padding: 5px;
  border: 1px solid #ddd;
}

.linkslist input[type="checkbox"] {
  position: absolute;
  left: -9999px;
}

.linkslist input[type="checkbox"]+label::after {
  font-size: 14px;
  font-weight: 700;
  color: initial;
  font-weight: normal;
  margin-right: 5px;
  right: 10px;
  top: 50%;
  position: absolute;
  text-decoration: none;
  display: inline-block;
  content: '+';
  transform: translateY(-50%);
}

.linkslist input[type="checkbox"]:checked+label::after {
  content: '-';
}

.linkslist .menu-list {
  list-style: none;
  padding-left: 0;
  margin-top: 0;
}

.linkslist input[type="checkbox"]~ul.menu-list {
  height: 0;
  transform: scaleY(0);
}

.linkslist input[type="checkbox"]:checked~ul.menu-list {
  border: 1px solid #f90; /* For testing */
  margin-top: -1px;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 180;
  width: 100%;
  box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
  height: auto;
  transform-origin: top;
  transition: transform .2s ease-out;
  transform: scaleY(1);
}

.linkslist .list-group-item {
  position: relative;
  display: block;
  padding: 9px 7px;
  margin-left: 0 !important;
  margin-bottom: -1px;
  background-color: #fff;
  border: 1px solid #ccc;
}

.linkslist .list-group-item a {
  color: inherit;
  display: block;
}

<div class="linkslist">
  <input type="checkbox" id="list-item">
  <label for="list-item" class="menu-trigger">Select</label>
  <ul class="list-group menu-list">
    <li class="list-group-item"><a href="https://www.google.com" title="Google">Google</a></li>
    <li class="list-group-item"><a href="https://www.bbc.co.uk" title="Go to BBC">BBC</a></li>
    <li class="list-group-item"><a href="https://www.facebook.com" title="Go to Facebook">Facebook</a></li>
  </ul>
</div>

Answer 2

尝试

删除.linkslist .list-group-item{ margin-bottom:-1px}和height:inherit from .linkslist input[type="checkbox"]:checked~ul.menu-list

.linkslist {
  position: relative;
  background-color: #fff;
}

.linkslist .menu-trigger {
  display: block;
  cursor: pointer;
  padding: 5px;
  border: 1px solid #ddd;
}

.linkslist input[type="checkbox"] {
  position: absolute;
  left: -9999px;
}

.linkslist input[type="checkbox"]+label::after {
  font-size: 14px;
  font-weight: 700;
  color: initial;
  font-weight: normal;
  margin-right: 5px;
  right: 10px;
  top: 50%;
  position: absolute;
  text-decoration: none;
  display: inline-block;
  content: '+';
  transform: translateY(-50%);
}

.linkslist input[type="checkbox"]:checked+label::after {
  content: '-';
}

.linkslist .menu-list {
  list-style: none;
  padding-left: 0;
  margin-top: 0;
}

.linkslist input[type="checkbox"]~ul.menu-list {
  height: 0;
  transform: scaleY(0);
}

.linkslist input[type="checkbox"]:checked~ul.menu-list {
  border: 1px solid #f90;
  margin-top: -1px;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 180;
  width: 100%;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
  box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
  height: inherit;
  transform-origin: top;
  transition: transform .2s ease-out;
  transform: scaleY(1);
}

.linkslist .list-group-item {
  position: relative;
  display: block;
  padding: 9px 7px;
  margin-left: 0 !important;
  /* margin-bottom: -1px;*/
  background-color: #fff;
  border: 1px solid #ccc;
}

.linkslist .list-group-item a {
  color: inherit;
  display: block;
}

body {
  padding: 20px;
}

<div class="linkslist">
  <input type="checkbox" id="list-item">
  <label for="list-item" class="menu-trigger">Select</label>
  <ul class="list-group menu-list">
    <li class="list-group-item"><a href="https://www.google.com" title="Google">Google</a></li>
    <li class="list-group-item"><a href="https://www.bbc.co.uk" title="Go to BBC">BBC</a></li>
    <li class="list-group-item"><a href="https://www.facebook.com" title="Go to Facebook">Facebook</a></li>
  </ul>
</div>

仅CSS可折叠列表-列表项溢出<ul>

2 个答案: