页面加载时可折叠打开答案

【问题标题】：Collapsible is open when page loads页面加载时可折叠打开
【发布时间】：2021-02-17 21:17:38
【问题描述】：

我安装了 Disqus 作为测试网页的插件，该网页应该在单独的帖子上进行。因此，我使用“显示 cmets”按钮制作了一个可折叠的按钮，以便在页面加载时隐藏插件，但是一旦单击“显示 cmets”，您就可以看到帖子的 cmets。我使用了 w3schools 中的可折叠示例，该示例默认关闭可折叠。出于某种原因，它与我的不一样，每当我加载页面时，可折叠的都是打开的。否则它可以正常工作。我尝试了一些与我类似的其他问题的解决方案，但没有奏效，而且，由于我不擅长 Javascript，我可能做错了。我也想知道是否是因为可折叠的内容是一个插件，这就是它保持打开状态的原因，但同样，我不确定它是如何工作的。这是网页：

https://appcom.webaddict.com.au/IT011/studentmasters/Site/explore.html

如果您也想查看样式表，请点击此处： https://appcom.webaddict.com.au/IT011/studentmasters/Site/createstylesheet.css

编辑：我发现类前面没有句号，所以我修复了它，它的显示设置为无，但它仍然不起作用，所以我不知道该怎么办。

我看看能不能把代码复制粘贴进去。

<button type="button" class="collapsible">Show Comments</button>
            <div class="comments" id="disqus_thread"></div>
<script>

/**
*  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
*  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables*/
/*
var disqus_config = function () {
this.page.url = PAGE_URL;  // Replace PAGE_URL with your page's canonical URL variable
this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
};
*/
(function() { // DON'T EDIT BELOW THIS LINE
var d = document, s = d.createElement('script');
s.src = 'https://studentmasters.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>

        <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.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
}
</script>

cmets 的 css 看起来像这样：

.comments {
  display: none;
  overflow: hidden;
}

【问题讨论】：

将 css 添加到 .comments 类 display:none; 这将解决您的问题，因为当您开始页面时会隐藏 div。
链接将来可能会失效，请直接在问题中发布简短摘要或编码sn-ps

标签： javascript html css collapsable

【解决方案1】：

将display: none; 添加到<div class="comments" id="disqus_thread" style="display: none;"></div>

我无法用您提供的代码复制您的问题，显示：无；在你的 cmets 课上对我来说很好。

对于您所追求的功能，我不建议将 display:none; 放在 CSS 的 cmets 类中。

当您导入其他人的 HTML 时，您的 CSS 可能会被覆盖。

您使用的 JS 代码也会影响内联样式，而不是类样式。

// Your comments code
(function() {
  var d = document,
    s = d.createElement('script');
  s.src = 'https://studentmasters.disqus.com/embed.js';
  s.setAttribute('data-timestamp', +new Date());
  (d.head || d.body).appendChild(s);
})();

// Your show/hide code
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.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
}

.comments {
  overflow: hidden;
}

<button type="button" class="collapsible">Show Comments</button>
<div class="comments" id="disqus_thread" style="display:none;"></div>

【讨论】：