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

【问题标题】：How to make an HTML collapsible button default to expanded?如何使 HTML 可折叠按钮默认为展开？
【发布时间】：2021-02-22 14:12:59
【问题描述】：

我有一个带有多个可折叠按钮的 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: '\002B';
  color: white;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2212";
}

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

感谢您查看此内容。

【问题讨论】：

标签： html button collapsable

【解决方案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

【讨论】：

感谢您回复 Shiverz。我很欣赏 JSFiddle 中的代码。它运行良好。第一个日期的按钮已展开，其他所有按钮均已折叠。我不精通 JavaScript，但我看不到如何从 HTML 中的第二个 - 最后一个按钮调用“collapse_this_week”函数。如何在 HTML 中调用该函数？是不是类似于：？我会把它放在标签之后吗？另外，对于位于第一个按钮以外位置的按钮，我如何调用第一个函数（比如说 expand_this_week）？
基本上，这段代码中发生了一些事情。由于您的 for 循环，每个具有“可折叠”类的元素都有一个事件侦听器。这意味着当您单击具有可折叠类的元素时，它会调用您使用事件侦听器定义的匿名函数。 collapse_this_week() 是一个单独的函数，只调用一次，它只展开第一个按钮。它们是两种不同的功能。 collapse_this_week 不是由第二个按钮调用的，而是由主线程调用的，相当于<script>collapse_this_week();</script>
再次感谢。知道了。我认为该函数的名称让我感到困惑。也许它应该被称为“expand_this_week()”？
您说得对，实际上应该，对此感到抱歉！哈哈..而不是不带参数，您可以说它带参数“i”，并将 coll[0] 替换为 coll[i] 以便您可以决定要扩展哪个可折叠！使用 expand_this_week(0)，第一个被扩展，使用 expand_this_week(1)，第二个被扩展，等等...