可折叠 div css - 需要它所以开始关闭

问题描述

我有一个可折叠的潜水，它工作正常，但我希望它在默认情况下显示为关闭状态，因为当前元素在进入页面时显示。

如何更改我发现的这个 css 以使可折叠项目在默认情况下关闭？

这里是css

/*
 CSS for the main interaction
*/
.accordion > input[type="checkBox"] {
  position: absolute;
  left: -100vw;
}

.accordion .content {
  overflow-y: hidden;
  height: 0;
  transition: height 0.3s ease;
}

.accordion > input[type="checkBox"]:checked ~ .content {
  height: auto;
  overflow: visible;
}

.accordion label {
  display: block;
}

  <section class="accordion">
   <input type="checkBox" name="collapse" id="handle1" checked="checked">
   <h2 class="handle">
     <label for="handle1"> text</label>
   </h2>
   <div class="content">
     <p><strong>Overall Impression:</strong> text </p>
     <p><strong>History:</strong> text</p>
   </div>
  </section>

解决方法

我假设您的可折叠 div 是 .accordion .content，因此您需要将以下内容作为 css 的一部分

common_id

我需要查看您的 html 和 js 代码才能确定。

<script>
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click",function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.maxHeight){
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";  } }); }
</script>

<style>
.collapsible {
  cursor: pointer;
  width: 100%;
}

.active,.collapsible:hover {
  background-color: #555;
}

.content {
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #f1f1f1;
}
</style>

<button class="collapsible">Click to Expand</button>

您需要做的就是删除 HTML 中 checked="checked" 上的 input，一切顺利。

/*
 CSS for the main interaction
*/
.accordion > input[type="checkbox"] {
  position: absolute;
  left: -100vw;
}

.accordion .content {
  overflow-y: hidden;
  height: 0;
  transition: height 0.3s ease;
}

.accordion > input[type="checkbox"]:checked ~ .content {
  height: auto;
  overflow: visible;
}

.accordion label {
  display: block;
}

 
 <section class="accordion">
   <input type="checkbox" name="collapse" id="handle1">
   <h2 class="handle">
     <label for="handle1"> text</label>
   </h2>
   <div class="content">
     <p><strong>Overall Impression:</strong> text </p>
     <p><strong>History:</strong> text</p>
   </div>
  </section>

在您提供的代码中，javascript 实际上并没有做任何事情。在这里，我让您的代码使用以下 html...（我将转换时间增加到 1 秒，因此效果更明显）。

.accordion > input[type="checkbox"] {
  position: absolute;
  left: -100vw;
}
.accordion .content {
  overflow-y: hidden;
  max-height: 0;
  transition: max-height 1s ease;
}
.accordion > input[type="checkbox"]:checked ~ .content {
  max-height: 100vh;
}
.accordion label {
  display: block;
}
.content {
  background-color: wheat;
}

<section class="accordion">
    <input type="checkbox" name="collapse" id="handle1">
    <h2 class="handle">
        <label for="handle1"> text</label>
    </h2>
    <div class="content">
        <p><strong>Overall Impression:</strong> text </p>
        <p><strong>History:</strong> text</p>
    </div>
</section>

collapsable html