使可折叠Divs在默认情况下不隐藏 [英] Make Collapsible Divs NOT hidden by default

问题描述

我正在从此处使用可折叠divs代码: https://www.w3schools.com/howto/howto_js_collapsible.asp

I am using the Collapsible divs code from here: https://www.w3schools.com/howto/howto_js_collapsible.asp

可折叠的div默认情况下是隐藏的，但我不知道如何编辑JavaScript使其能够显示，因此默认情况下它们都是可见的&仅在您单击按钮将其隐藏时才隐藏.

The collapsible divs are hidden by default, but I can't figure out how to edit the JavaScript to make it so they are all visible by default & only hidden when you click the button to hide them.

示例代码:

HTML

<button type="button" class="collapsible">Open Collapsible</button>
<div class="content">
  <p>Lorem ipsum...</p>
</div>

CSS

/* Style the button that is used to open and close the collapsible content */
.collapsible {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .collapsible:hover {
  background-color: #ccc;
}

/* Style the collapsible content. Note: hidden by default */
.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
}

Java脚本

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";
    }
  });
}

任何帮助将不胜感激.谢谢！-劳伦

Any help would be much appreciated. Thanks! - Lauren

推荐答案

您必须将 .content 的css更改为 display:block; 您将不得不更改JavaScript，以便在您单击打开的可折叠对象时将其关闭.否则，您必须单击两次才能将其关闭，因为第一次单击时，它仍然没有任何 content.style.display .

You do have to change the css of .content to display: block; but also, you'll have to change the JavaScript so that when you click on the open collapsible it closes. Otherwise, you'll have to click on it twice for it to close, as on the first click it still doesn't have any content.style.display.

特别是这里的检查:

if (!content.style.display || content.style.display === "block") {
  content.style.display = "none";
} else {
  content.style.display = "block";
}

请参见下面的代码段

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

.collapsible {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

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

.content {
  padding: 0 18px;
  display: block;
  overflow: hidden;
  background-color: #f1f1f1;
}

<h2>Collapsibles</h2>

<p>A Collapsible:</p>
<button type="button" class="collapsible">Open Collapsible</button>
<div class="content">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </p>
</div>

<p>Collapsible Set:</p>
<button type="button" class="collapsible">Open Section 1</button>
<div class="content">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </p>
</div>
<button type="button" class="collapsible">Open Section 2</button>
<div class="content">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </p>
</div>
<button type="button" class="collapsible">Open Section 3</button>
<div class="content">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </p>
</div>

这篇关于使可折叠Divs在默认情况下不隐藏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！