如何使 HTML 可折叠按钮默认展开？

Question

我有一个包含多个可折叠按钮的 HTML 页面。我希望在加载页面时展开一个按钮。现在所有按钮都默认折叠。如何更改 HTML 或 CSS 以便展开特定按钮（当前周）并折叠其余按钮？相关代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>
    Prior_Recordings_HTML5
    </title>
</head>
    <link href="CSS/my_site.css" rel="stylesheet" type="text/css" />
<body>
<table class="table_for_collapse">
    <tr>
        <td>
            <button class=collapsible>Current Week&mdash;November 8, 2020</button>
            <div class=collapsible_content>
                <a href="https://my_site_link_1" target="_blank" class="link3"
                    title="Sunday 11/8/2020">
                    Click here for Sunday, 11/8/2020<br />
                </a>
                <a href="https://my_site_link_2" target="_blank" class="link3"
                    title="Monday 11/9/2020">
                    Click here for 11/9/2020<br />
                </a>
            </div>
        </td>
    </tr>
    <tr>
        <td>
            <button class=collapsible>Prior Week 1&mdash;November 1, 2020</button>
            <div class=collapsible_content>
                <a href="https://my_site_link_3" target="_blank" class="link3"
                    title="Sunday 11/1/2020">
                    Click here for Sunday, 11/1/2020<br />
                </a>
                <a href="https://my_site_link_4" target="_blank" class="link3"
                    title="Monday 11/2/2020">
                    Click here for 11/2/2020<br />
                </a>
            </div>
        </td>
    </tr>
</table>
<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>
</body>
</html>

这里是 CSS:

.collapsible {
  background-color: #777;
  color: white;
  cursor: pointer;
  font-size: 15px;
  padding-top: 6px;
  padding-bottom: 6px;
  text-align: left;
  width: 450px;
  max-width: 1000px; 
}

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

.collapsible:after {
  content: '[=12=]2B';
  color: white;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "12";
}

.collapsible_content {
/*
  padding: 0 18px;
*/
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #EEE8AA;
}

感谢您的关注。

Answer 1

也许我没听懂，但你为什么不运行主线程中事件监听器函数中的代码运行？

如果以后要处理日期，可以为它创建一个单独的函数，如下所示：

    function collapse_this_week(){
    coll[0].classList.toggle("active");
        var content = coll[0].nextElementSibling;
        if (content.style.maxHeight){
          content.style.maxHeight = null;
        } else {
          content.style.maxHeight = content.scrollHeight + "px";
        } 
    }

您可以将参数传递给该函数，以确定根据开始使用日期的日期展开哪个按钮。

JSFiddle 使用您的代码：Here

如何使 HTML 可折叠按钮默认展开？

How to make an HTML collapsible button default to expanded?

html

button

collapsable