折叠面板

 

效果图：

代码：

<template>
  <div>
    <div class="bruce flex-ct-x">
      <div class="accordion">
        <input type="checkbox" id="collapse1" />
        <input type="checkbox" id="collapse2" />
        <input type="checkbox" id="collapse3" />
        <article>
          <label for="collapse1">列表1</label>
          <p>
            内容1
            <br />内容2
            <br />内容3
            <br />内容4
          </p>
        </article>
        <article>
          <label for="collapse2">列表2</label>
          <p>
            内容1
            <br />内容2
            <br />内容3
            <br />内容4
          </p>
        </article>
        <article>
          <label for="collapse3">列表3</label>
          <p>
            内容1
            <br />内容2
            <br />内容3
            <br />内容4
          </p>
        </article>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },

  methods: {},

  created() {}
};
</script>
<style lang="scss" scoped>
.accordion {
  width: 300px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  justify-content: center;
  article {
    margin-top: 5px;
    cursor: pointer;
    &:first-child {
      margin-top: 0;
    }
  }
  input {
    display: none;
    // & 表示嵌套的上一级,这是sass的语法，代表上一级选择器
    &:nth-child(1):checked ~ article:nth-of-type(1) p,
    &:nth-child(2):checked ~ article:nth-of-type(2) p,
    &:nth-child(3):checked ~ article:nth-of-type(3) p {
      border-bottom-width: 1px;
      max-height: 600px;
    }
  }
  label {
    display: block;
    padding: 0 20px;
    height: 40px;
    background-color: red;
    cursor: pointer;
    line-height: 40px;
    font-size: 16px;
    color: #fff;
  }
  p {
    overflow: hidden;
    padding: 0 20px;
    border: 1px solid red;
    border-top: none;
    border-bottom-width: 0;
    max-height: 0;
    line-height: 30px;
    transition: all 500ms;
  }
}
</style>