javascript - 尝试创建折叠/展开所有按钮

Question

我已经在我的网站上实现了 aligator.io“纯 CSS 可折叠”，我正在尝试想出一种方法来选择所有这些并同时折叠/展开它们。这是 aligator.io 页面的链接:https://alligator.io/css/collapsible/

这是 HTML:

<div class="wrap-collabsible">
  <input id="collapsible" class="toggle" type="checkbox">
    <label for="collapsible" class="lbl-toggle" tabindex="0">lorem 
    ipsum</label>
      <div class="collapsible-content">
    <div class="content-inner">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In 
          consequat turpis nibh, at molestie nibh feugiat vel. Donec laoreet 
          tristique turpis ut malesuada. Maecenas ultrices posuere sem at 
          dignissim. Ut posuere, orci sed pharetra finibus, augue sapien 
          lacinia urna, convallis faucibus quam orci sit amet arcu. Nulla 
          porttitor cursus lacus ac ultrices.</p>
    </div>
     </div>
  </div>

这是 CSS:

.wrap-collabsible {
    margin-bottom: 1.2rem 0;
}
input[type='checkbox'] {
    display: none;
}
.lbl-toggle {
    display: block;
    font-weight: bold;
    font-family: "Segoe UI", Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial,sans-serif;
    font-size: 14px;
    text-transform: uppercase;
    text-align: center;
    padding: 1rem;
    color: #cccccc;
    background: #424874;
    cursor: pointer;
    border-radius: 7px;
    transition: all 0.25s ease-out; 
}
.lbl-toggle:hover {
    color: #DC143C;
}
.lbl-toggle::before {
    content: ' ';
    display: inline-block;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 6px solid currentColor;
    vertical-align: middle;
    margin-right: .7rem;
    transform: translateY(-2px);
    transition: transform .2s ease-out;

}
.toggle:checked + .lbl-toggle::before {
    transform: rotate(90deg) translateX(-3px);
}
.collapsible-content {
    max-height: 0px;
    overflow: hidden;
    transition: max-height .25s ease-in-out;
}
.toggle:checked + .lbl-toggle + .collapsible-content {
    max-height: 350px;
}
.toggle:checked + .lbl-toggle {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}
.collapsible-content .content-inner {
    background: #E1DCDC;
    border-bottom: 4px solid #9A8F97;
    border-right: 3px solid #9A8F97;
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
    padding: .5rem 1rem;
    color:black;
    font-weight:600;
}

所以我想在可折叠项上方放置一个或 2 个按钮，用于选择每个可折叠项然后操作每个可折叠项？

Answer 1

您好，请检查以下解决方案:

我在上面添加了按钮，它可以在点击时更改切换复选框的状态

document.getElementsByClassName('collapseAll')[0].addEventListener('click', function() {
  var toggle = document.getElementsByClassName('toggle');
  var numtoggle = toggle.length;

  for (var i = 0; i < numtoggle; i++) {
    document.getElementsByClassName("toggle")[i].checked = true;
  }
});


document.getElementsByClassName('uncollapseAll')[0].addEventListener('click', function() {
  var toggle = document.getElementsByClassName('toggle');
  var numtoggle = toggle.length;

  for (var i = 0; i < numtoggle; i++) {
    document.getElementsByClassName("toggle")[i].checked = false;
  }
});

.wrap-collabsible {
    margin-bottom: 1.2rem 0;
}
input[type='checkbox'] {
    display: none;
}
.lbl-toggle {
    display: block;
    font-weight: bold;
    font-family: "Segoe UI", Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial,sans-serif;
    font-size: 14px;
    text-transform: uppercase;
    text-align: center;
    padding: 1rem;
    color: #cccccc;
    background: #424874;
    cursor: pointer;
    border-radius: 7px;
    transition: all 0.25s ease-out; 
}
.lbl-toggle:hover {
    color: #DC143C;
}
.lbl-toggle::before {
    content: ' ';
    display: inline-block;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 6px solid currentColor;
    vertical-align: middle;
    margin-right: .7rem;
    transform: translateY(-2px);
    transition: transform .2s ease-out;

}
.toggle:checked + .lbl-toggle::before {
    transform: rotate(90deg) translateX(-3px);
}
.collapsible-content {
    max-height: 0px;
    overflow: hidden;
    transition: max-height .25s ease-in-out;
}
.toggle:checked + .lbl-toggle + .collapsible-content {
    max-height: 350px;
}
.toggle:checked + .lbl-toggle {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}
.collapsible-content .content-inner {
    background: #E1DCDC;
    border-bottom: 4px solid #9A8F97;
    border-right: 3px solid #9A8F97;
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
    padding: .5rem 1rem;
    color:black;
    font-weight:600;
}

<div>
  <button  class="collapseAll">Collapse ALL</button>
</div>
<div>
  <button  class="uncollapseAll">Un Collapse ALL</button>
</div>


<div class="wrap-collabsible">
  <input id="collapsible1" class="toggle" type="checkbox">
    <label for="collapsible1" class="lbl-toggle" tabindex="0">lorem 
    ipsum</label>
      <div class="collapsible-content">
    <div class="content-inner">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In 
          consequat turpis nibh, at molestie nibh feugiat vel. Donec laoreet 
          tristique turpis ut malesuada. Maecenas ultrices posuere sem at 
          dignissim. Ut posuere, orci sed pharetra finibus, augue sapien 
          lacinia urna, convallis faucibus quam orci sit amet arcu. Nulla 
          porttitor cursus lacus ac ultrices.</p>
    </div>
     </div>
  </div>
  
 <div class="wrap-collabsible">
  <input id="collapsible2" class="toggle" type="checkbox">
    <label for="collapsible2" class="lbl-toggle" tabindex="0">lorem 
    ipsum</label>
      <div class="collapsible-content">
    <div class="content-inner">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In 
          consequat turpis nibh, at molestie nibh feugiat vel. Donec laoreet 
          tristique turpis ut malesuada. Maecenas ultrices posuere sem at 
          dignissim. Ut posuere, orci sed pharetra finibus, augue sapien 
          lacinia urna, convallis faucibus quam orci sit amet arcu. Nulla 
          porttitor cursus lacus ac ultrices.</p>
    </div>
     </div>
  </div>