CSS折叠面板默认未关闭及点击切换文本问题求助

一、实现页面加载时折叠面板关闭 #

默认状态下你的折叠内容是显示的，只需通过CSS给.collapsible_content设置初始隐藏样式即可，这种方式比JS初始化更高效：

.collapsible_content {
  display: none;
}

二、实现点击时切换按钮文本 #

你当前的JS存在两个问题：重复绑定点击事件、文本切换逻辑错误。需要将内容显示切换和文本切换逻辑合并到同一个点击事件中：

• 若内容当前为显示状态，点击后隐藏内容，同时按钮文本改为Open Collapsible
• 若内容当前为隐藏状态，点击后显示内容，同时按钮文本改为Close Collapsible

修改后的完整代码 #

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

    <style>
      body {
        margin: 0;
        padding: 0;
        font-family: Verdana, Arial, sans-serif;
        font-size: 10pt;
        text-align: justify;
        text-justify: inter-word;
      }

      div.centered {
        width: 1250px;
        position: absolute;
        top: 0px;
        left: 50%;
        bottom: 0px;
        margin-left: -625px;
      }
      div.centered div.content {
        padding: 20px 50px 0px 50px;
      }

      div.centered div.content div.heading {
        border-bottom: solid 1px #400000;
        font-size: 8pt;
        font-weight: bold;
        color: #400000;
        margin-bottom: 5px;
        cursor: pointer; /* 添加鼠标指针样式，提示可点击 */
      }

      div.centered div.content div.credentials {
        font-size: 8pt;
        font-weight: bold;
        color: #400000;
        margin-bottom: 5px;
        text-align: center;
      }

      blockquote {
        margin: 10px 20px 10px 20px;
        padding: 5px 10px 5px 10px;
        border: dashed 1px #804040;
        color: #400000;
        background-color: #F4F0F0;
      }

      div.footer {
        height: 20px;
        padding: 0px 50px 0px 50px;
        border-top: dashed 1px #808080;
        margin-top: 20px;
        color: #808080;
        font-size: 7pt;
      }

      /* 初始隐藏折叠内容 */
      .collapsible_content {
        display: none;
      }
    </style>
  </head>

  <body>
    <div class="centered">
      <div class="content">
        <div type="button" class="collapsible heading">Open Collapsible</div>
        <div class="collapsible_content">
          <br />
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius id diam in pretium. Nam sed neque vel nisl sagittis vestibulum. Donec molestie gravida mollis. Sed sit amet orci ac odio euismod elementum dignissim sed quam. Sed ullamcorper, nisi sed mollis maximus, lorem diam accumsan metus, et volutpat felis eros ut erat. Nunc iaculis mattis pharetra. Aenean dictum odio non pharetra dignissim. Aliquam vehicula cursus nisi eget suscipit. Aenean imperdiet semper orci, quis porta risus. Quisque imperdiet mattis lacus, fermentum lacinia tellus vulputate et. Proin diam neque, porttitor nec ultricies et, vestibulum ac risus.<br />
          <br />
          Sed in bibendum purus. Donec auctor ornare lobortis. Sed consectetur fermentum tellus, at luctus velit semper ac. Sed vitae enim turpis. Quisque sollicitudin massa condimentum dui fringilla, a auctor ex sagittis. Aenean finibus arcu in consequat venenatis. Curabitur sed orci eu purus vulputate faucibus ac non erat. Nam suscipit aliquam purus, ac iaculis lectus tincidunt id.<br />
          <br />
          Etiam sollicitudin porta nisi, vitae aliquam justo sollicitudin pulvinar. Nullam massa ipsum, elementum et pharetra lobortis, elementum at tortor. Ut tincidunt orci et nisl porttitor, nec pharetra justo elementum. Integer lobortis finibus augue ac feugiat. Maecenas interdum ornare lacus in feugiat. Sed volutpat lacinia ligula, in semper sem vehicula et. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque rhoncus vehicula iaculis. Sed vel feugiat nisl. Suspendisse at nibh rhoncus, congue elit id, congue nisi. Praesent nibh magna, tristique ut mauris id, consequat viverra est. Nam placerat ex ac neque egestas feugiat non eu risus. 
        </div>
      </div>
      <div class="footer">
        End of Document
      </div>
    </div>

    <script>
      // 合并折叠逻辑与文本切换逻辑
      var coll = document.getElementsByClassName("collapsible");
      for (var i = 0; i < coll.length; i++) {
        coll[i].addEventListener("click", function() {
          var content = this.nextElementSibling;
          if (content.style.display === "block") {
            // 当前显示，切换为隐藏
            content.style.display = "none";
            this.innerText = "Open Collapsible";
          } else {
            // 当前隐藏，切换为显示
            content.style.display = "block";
            this.innerText = "Close Collapsible";
          }
          this.classList.toggle("inactive");
        });
      }
    </script>
  </body>
</html>

关键修改说明 #

1. CSS部分：添加.collapsible_content { display: none; }确保页面加载时内容默认隐藏；给.heading添加cursor: pointer提升交互体验。
2. JS部分：删除重复的点击事件绑定，将内容切换和文本切换逻辑合并到同一个事件处理函数中，修正文本切换的判断逻辑，确保状态对应正确。

内容的提问来源于stack exchange，提问作者Justin Reever