CSS 如何实现类似于 Bootstrap 导航栏中的折叠效果

在本文中，我们将介绍如何使用 CSS 实现类似于 Bootstrap 导航栏中常见 DIV 元素的折叠效果。

阅读更多：CSS 教程

1. 利用 CSS 的属性

在 CSS 中，我们可以使用 display 属性来控制元素的显示方式。通过设置元素的 display 属性为 "none"，我们可以将该元素隐藏起来。而通过设置 display 属性为 "block" 或 "flex"，我们可以将元素重新显示出来。

<style>
  #collapsible {
    display: none;
  }

  #toggleButton {
    display: block;
    background-color: #ccc;
    padding: 10px;
    cursor: pointer;
  }

  .collapsed {
    display: none;
  }

  .expanded {
    display: block;
  }
</style>

<div id="toggleButton" onclick="toggleCollapse()">点击展开/折叠</div>
<div id="collapsible">可折叠内容</div>

<script>
  function toggleCollapse() {
    const collapsible = document.getElementById("collapsible");
    const toggleButton = document.getElementById("toggleButton");

    if (collapsible.classList.contains("collapsed")) {
      collapsible.classList.remove("collapsed");
      collapsible.classList.add("expanded");
      toggleButton.innerText = "点击折叠";
    } else {
      collapsible.classList.add("collapsed");
      collapsible.classList.remove("expanded");
      toggleButton.innerText = "点击展开";
    }
  }
</script>

在上面的示例中，我们通过设置 #collapsible 的 display 属性为 "none"，将元素隐藏起来。通过点击 #toggleButton，我们可以触发 toggleCollapse() 函数，该函数会通过添加或移除 CSS 类来改变 #collapsible 的 display 属性，从而实现折叠与展开的效果。

2. 使用 CSS 动画实现平滑过渡

除了基本的折叠与展开效果，我们还可以通过 CSS 动画实现平滑的过渡效果。CSS 的 transition 属性可以让元素的属性在一段时间内进行平滑过渡。

<style>
  #collapsible {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s;
  }

  #toggleButton {
    display: block;
    background-color: #ccc;
    padding: 10px;
    cursor: pointer;
  }

  .expanded {
    max-height: 100px;
  }
</style>

<div id="toggleButton" onclick="toggleCollapse()">点击展开/折叠</div>
<div id="collapsible">可折叠内容</div>

<script>
  function toggleCollapse() {
    const collapsible = document.getElementById("collapsible");
    const toggleButton = document.getElementById("toggleButton");

    if (collapsible.classList.contains("expanded")) {
      collapsible.classList.remove("expanded");
      toggleButton.innerText = "点击展开";
    } else {
      collapsible.classList.add("expanded");
      toggleButton.innerText = "点击折叠";
    }
  }
</script>

在上面的示例中，我们通过设置 #collapsible 的 max-height 和 overflow 属性，从而使元素的高度可以平滑地过渡。当 #collapsible 的 expanded 类被添加时，max-height 将被设置为一定的值，从而显示出元素的内容。

这样，我们就可以通过 CSS 和少量的 JavaScript 代码实现类似于 Bootstrap 导航栏中的折叠效果了。

总结

通过利用 CSS 的属性和动画效果，我们可以实现类似于 Bootstrap 导航栏中的折叠效果。使用 display 属性来控制元素的显示和隐藏，结合 JavaScript 的操作，可以实现用户交互的功能。同时，我们还可以利用 CSS 的 transition 属性实现平滑的过渡效果，让折叠与展开更加流畅。希望本文能够帮助读者了解如何使用 CSS 来实现常见 DIV 元素的折叠效果。