CSS一键实现超出固定高度出现展开折叠按钮，简单高效

2023-08-09 15:28:55

CSS实现超出固定高度后出现展开折叠按钮

在网页设计中，经常需要控制内容块的高度，当内容超出指定高度时，自动显示展开折叠按钮，方便用户根据需要查看更多内容。本文将介绍如何使用CSS轻松实现这一效果，无需借助JavaScript。

步骤详解

设置容器高度： 首先，为需要控制高度的容器设置一个固定高度，例如：

.container {
  height: 200px;
  overflow: hidden;
}

创建展开折叠按钮： 接下来，创建一个按钮，用于在内容超出固定高度时显示，点击该按钮即可展开或折叠内容。

.button {
  display: none;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background-color: #ccc;
  color: #fff;
  cursor: pointer;
}

显示按钮： 当容器高度超出固定高度时，显示展开折叠按钮。

.container:hover .button,
.container[data-expanded="true"] .button {
  display: block;
}

展开折叠内容： 点击按钮，根据用户操作展开或折叠容器内容。

.button:hover,
.button:focus {
  background-color: #ddd;
}

.button:active {
  background-color: #ccc;
}

.container[data-expanded="true"] {
  height: auto;
  overflow: visible;
}

代码示例

<!DOCTYPE html>
<html>
<head>
  
  <style>
    .container {
      height: 200px;
      overflow: hidden;
    }

    .button {
      display: none;
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 40px;
      line-height: 40px;
      text-align: center;
      background-color: #ccc;
      color: #fff;
      cursor: pointer;
    }

    .container:hover .button,
    .container[data-expanded="true"] .button {
      display: block;
    }

    .button:hover,
    .button:focus {
      background-color: #ddd;
    }

    .button:active {
      background-color: #ccc;
    }

    .container[data-expanded="true"] {
      height: auto;
      overflow: visible;
    }
  </style>
</head>
<body>
  <div class="container">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget lacus eget nunc tincidunt laoreet. Nam eget lacus eget nunc tincidunt laoreet. Vivamus eget lacus eget nunc tincidunt laoreet. Nam eget lacus eget nunc tincidunt laoreet. Vivamus eget lacus eget nunc tincidunt laoreet. Nam eget lacus eget nunc tincidunt laoreet. Vivamus eget lacus eget nunc tincidunt laoreet.</p>
    <button class="button" data-expanded="false">展开</button>
  </div>
</body>
</html>

常见问题解答

如何设置展开折叠按钮的样式？

您可以根据需要自定义按钮的样式，包括颜色、字体、边框等。
如何控制展开后的内容高度？

您可以使用max-height属性限制展开后的内容高度。
如何使用多个展开折叠按钮？

您可以为每个容器添加一个唯一的展开折叠按钮，通过data-target属性关联容器和按钮。
如何防止按钮遮挡内容？

可以通过设置z-index属性将按钮放在内容之上。
如何判断容器是否处于展开状态？

您可以使用data-expanded属性来标识容器的展开状态，如：
```
if (container.getAttribute('data-expanded') === 'true') {
  // 容器已展开
}
```