2023年4月17日 15:36:35go评论70阅读模式

英文:

Pre-open nested collapsible with JavaScript

问题

我想要在有人访问页面时，所有按钮可折叠的部分都已经打开。他们应该能够随时单击任何按钮元素来打开/关闭可折叠部分。

以下是我目前正在使用的代码示例。当您单击关闭的父按钮时，子元素会自动打开。我需要稍微修改代码，以便所有按钮元素都以打开状态开始。

<button type="button" class="collapsible">Act 1</button>
<div class="content">
   <button type="button" class="collapsible">Scene 1</button>
   <div class="content">
      <button type="button" class="collapsible">Snippet 1</button>
      <div class="content">
         <p>这里是示例文本。</p>
      </div>
      <button type="button" class="collapsible">Snippet 2</button>
      <div class="content">
         <p>这里是示例文本。</p>
      </div>
      <button type="button" class="collapsible">Snippet 3</button>
      <div class="content">
         <p>这里是示例文本。</p>
      </div>
   </div>
   <button type="button" class="collapsible">Scene 2</button>
   <div class="content">
      <button type="button" class="collapsible">Snippet 1</button>
      <div class="content">
         <p>这里是示例文本。</p>
      </div>
      <button type="button" class="collapsible">Snippet 2</button>
      <div class="content">
         <p>这里是示例文本。</p>
      </div>
      <button type="button" class="collapsible">Snippet 3</button>
      <div class="content">
         <p>这里是示例文本。</p>
      </div>
   </div>
</div>

这段代码中的按钮元素已经默认为打开状态。

英文:

I'd like to have my button collapsibles all already open when someone visits the page. They should be able to click any of the button elements to open/close the collapsible at any time.

The following is an example of code I'm working with right now. The children element opens automatically when you click on a closed parent button. What I need is to modify the code slightly so that all the button elements start as open.

const collapsibles = document.querySelectorAll(&quot;.collapsible&quot;);
collapsibles.forEach(collapsible =&gt; {
    collapsible.addEventListener(&quot;click&quot;, function() {
        open(this);
        const children = this.nextElementSibling.querySelectorAll(&#39;.collapsible&#39;);
        children.forEach(open);
    });
});

function open(element) {
    element.classList.toggle(&quot;active&quot;);
    var content = element.nextElementSibling;
    if (content.style.display === &quot;block&quot;) {
        content.style.display = &quot;none&quot;;
    } else {
        content.style.display = &quot;block&quot;;
    }
}

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

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

.collapsible::after {
  content: &#39;.collapsible {
background-color: #0486C1;
color: white;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
.active,
.collapsible:hover {
background-color: #254062;
}
.collapsible::after {
content: &#39;\002B&#39;;
margin-left: 5px;
}
.collapsible.active::after {
content: &quot;\2212&quot;;
}
.content {
padding: 0 18px;
display: none;
overflow: hidden;
background-color: #E2E2E2;
transition: max-height 0.2s ease-out;
}
p {
color: #000000;
}
2B&#39;;
  margin-left: 5px;
}

.collapsible.active::after {
  content: &quot;12&quot;;
}

.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #E2E2E2;
  transition: max-height 0.2s ease-out;
}

p {
  color: #000000;
}

&lt;button type=&quot;button&quot; class=&quot;collapsible&quot;&gt;Act 1&lt;/button&gt;
&lt;div class=&quot;content&quot;&gt;
   &lt;button type=&quot;button&quot; class=&quot;collapsible&quot;&gt;Scene 1&lt;/button&gt;
   &lt;div class=&quot;content&quot;&gt;
      &lt;button type=&quot;button&quot; class=&quot;collapsible&quot;&gt;Snippet 1&lt;/button&gt;
      &lt;div class=&quot;content&quot;&gt;
         &lt;p&gt;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.&lt;/p&gt;
      &lt;/div&gt;
      &lt;button type=&quot;button&quot; class=&quot;collapsible&quot;&gt;Snippet 2&lt;/button&gt;
      &lt;div class=&quot;content&quot;&gt;
         &lt;p&gt;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.&lt;/p&gt;
      &lt;/div&gt;
      &lt;button type=&quot;button&quot; class=&quot;collapsible&quot;&gt;Snippet 3&lt;/button&gt;
      &lt;div class=&quot;content&quot;&gt;
         &lt;p&gt;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.&lt;/p&gt;
      &lt;/div&gt;
   &lt;/div&gt;
   &lt;button type=&quot;button&quot; class=&quot;collapsible&quot;&gt;Scene 2&lt;/button&gt;
   &lt;div class=&quot;content&quot;&gt;
      &lt;button type=&quot;button&quot; class=&quot;collapsible&quot;&gt;Snippet 1&lt;/button&gt;
      &lt;div class=&quot;content&quot;&gt;
         &lt;p&gt;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.&lt;/p&gt;
      &lt;/div&gt;
      &lt;button type=&quot;button&quot; class=&quot;collapsible&quot;&gt;Snippet 2&lt;/button&gt;
      &lt;div class=&quot;content&quot;&gt;
         &lt;p&gt;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.&lt;/p&gt;
      &lt;/div&gt;
      &lt;button type=&quot;button&quot; class=&quot;collapsible&quot;&gt;Snippet 3&lt;/button&gt;
      &lt;div class=&quot;content&quot;&gt;
         &lt;p&gt;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.&lt;/p&gt;
      &lt;/div&gt;
   &lt;/div&gt;
&lt;/div&gt;

答案1

得分: 0

你可以简单地将类active添加到所有可折叠元素的初始状态，或者你可以创建一个脚本来默认打开所有可折叠元素。

<button type="button" class="collapsible active">片段 1</button>

const collapsibles = document.querySelectorAll(".collapsible");
collapsibles.forEach(collapsible => {
    collapsible.addEventListener("click", function() {
        open(this);
        const children = this.nextElementSibling.querySelectorAll('.collapsible');
        children.forEach(open);
    });
});

function open(element) {
    element.classList.toggle("active");
}

document.querySelectorAll('.collapsible').forEach(open);

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

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

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

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

.collapsible::after {
  content: '\002B';
  margin-left: 5px;
}

.collapsible.active::after {
  content: "－";
}

.collapsible + .content{
  display:none;
}
.collapsible.active + .content{
  display:block;
}
.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #E2E2E2;
  transition: max-height 0.2s ease-out;
}

p {
  color: #000000;
}
2B';
  margin-left: 5px;
}

.collapsible.active::after {
  content: "－";
}

.collapsible + .content{
  display:none;
}
.collapsible.active + .content{
  display:block;
}
.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #E2E2E2;
  transition: max-height 0.2s ease-out;
}

p {
  color: #000000;
}

<button type="button" class="collapsible">行动 1</button>
<div class="content">
   <button type="button" class="collapsible">场景 1</button>
   <div class="content">
      <button type="button" class="collapsible">片段 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">片段 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">片段 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>
   </div>
   <button type="button" class="collapsible">场景 2</button>
   <div class="content">
      <button type="button" class="collapsible">片段 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">片段 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">片段 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>
   </div>
</div>

英文:

You can simply add a class active to all collapsibles initially

&lt;button type=&quot;button&quot; class=&quot;collapsible active&quot;&gt;Snippet 1&lt;/button&gt;

or you can make a script to open all collapsibles by default

const collapsibles = document.querySelectorAll(&quot;.collapsible&quot;);
collapsibles.forEach(collapsible =&gt; {
collapsible.addEventListener(&quot;click&quot;, function() {
open(this);
const children = this.nextElementSibling.querySelectorAll(&#39;.collapsible&#39;);
children.forEach(open);
});
});
function open(element) {
element.classList.toggle(&quot;active&quot;);
}
// here
document.querySelectorAll(&#39;.collapsible&#39;).forEach(open)

.collapsible {
background-color: #0486C1;
color: white;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
.active,
.collapsible:hover {
background-color: #254062;
}
.collapsible::after {
content: &#39;\002B&#39;;
margin-left: 5px;
}
.collapsible.active::after {
content: &quot;\2212&quot;;
}
.collapsible + .content{
display:none;
}
.collapsible.active + .content{
display:block;
}
.content {
padding: 0 18px;
display: none;
overflow: hidden;
background-color: #E2E2E2;
transition: max-height 0.2s ease-out;
}
p {
color: #000000;
}

&lt;button type=&quot;button&quot; class=&quot;collapsible&quot;&gt;Act 1&lt;/button&gt;
&lt;div class=&quot;content&quot;&gt;
   &lt;button type=&quot;button&quot; class=&quot;collapsible&quot;&gt;Scene 1&lt;/button&gt;
   &lt;div class=&quot;content&quot;&gt;
      &lt;button type=&quot;button&quot; class=&quot;collapsible&quot;&gt;Snippet 1&lt;/button&gt;
      &lt;div class=&quot;content&quot;&gt;
         &lt;p&gt;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.&lt;/p&gt;
      &lt;/div&gt;
      &lt;button type=&quot;button&quot; class=&quot;collapsible&quot;&gt;Snippet 2&lt;/button&gt;
      &lt;div class=&quot;content&quot;&gt;
         &lt;p&gt;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.&lt;/p&gt;
      &lt;/div&gt;
      &lt;button type=&quot;button&quot; class=&quot;collapsible&quot;&gt;Snippet 3&lt;/button&gt;
      &lt;div class=&quot;content&quot;&gt;
         &lt;p&gt;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.&lt;/p&gt;
      &lt;/div&gt;
   &lt;/div&gt;
   &lt;button type=&quot;button&quot; class=&quot;collapsible&quot;&gt;Scene 2&lt;/button&gt;
   &lt;div class=&quot;content&quot;&gt;
      &lt;button type=&quot;button&quot; class=&quot;collapsible&quot;&gt;Snippet 1&lt;/button&gt;
      &lt;div class=&quot;content&quot;&gt;
         &lt;p&gt;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.&lt;/p&gt;
      &lt;/div&gt;
      &lt;button type=&quot;button&quot; class=&quot;collapsible&quot;&gt;Snippet 2&lt;/button&gt;
      &lt;div class=&quot;content&quot;&gt;
         &lt;p&gt;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.&lt;/p&gt;
      &lt;/div&gt;
      &lt;button type=&quot;button&quot; class=&quot;collapsible&quot;&gt;Snippet 3&lt;/button&gt;
      &lt;div class=&quot;content&quot;&gt;
         &lt;p&gt;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.&lt;/p&gt;
      &lt;/div&gt;
   &lt;/div&gt;
&lt;/div&gt;

Edit: I changed you css a little bit and it now uses the + (sibling) selector of CSS to show all the .content after an open collapsible

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

Pre-open嵌套可折叠的JavaScript

问题

答案1

如何在托管在GCP之外的情况下将 GOOGLE_APPLICATION_CREDENTIAL 添加到 Vision 中

为什么这个不创建一个正方形？

理解 JavaScript 中的 .bind(this)

选择另一个下拉菜单中的选项时，如何选择特定的下拉菜单？

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论