javascript - 使用纯 JavaScript 关闭先前打开的 Accordion

Question

在具有三个 Accordion 的 Shopify 产品页面中，我尝试添加一些 JavaScript 代码以确保在页面加载时默认情况下仅打开第一个 Accordion ，并且关闭所有先前打开的 Accordion 。

使用以下内容，我只能让第一个 Accordion 在页面加载时显示为打开状态。我需要添加在单击另一个 Accordion 时关闭所有以前打开的 Accordion 的功能。你能帮忙吗？我只在寻找纯 JS 解决方案。我需要执行此操作的页面是 here

 window.onload = function() {
  var accItem = document.getElementsByClassName('accordion__item');
  // Keep the first accordion open by default.
  for (i = 0; i < accItem.length; i++) {
    console.log("Within first for loop");
    accItem[i].addEventListener('click', toggleItem, false);
  }
  function toggleItem() {
    var itemClass = this.parentNode.className;
    for (i = 0; i < accItem.length; i++) {
      console.log("Within second for loop");
      accItem[i].className = 'accordion__item close';
    }
    if (itemClass == 'accordion__item close') {
        this.parentNode.className = 'accordion__item open';
    }
  }    
 };

上面链接页面的 HTML 摘录是:

<div class="col-12 accordion product__accordion margin__bottom--reduced">
    <input type="radio" id="a66f79b6-abe9-4e4e-9e91-0994a9c01b1b--close" name="a66f79b6-abe9-4e4e-9e91-0994a9c01b1b">
    <label class="accordion__item">
        <input type="radio" name="a66f79b6-abe9-4e4e-9e91-0994a9c01b1b">
        <span class="accordion__item--title">Description<label class="collapse" for="a66f79b6-abe9-4e4e-9e91-0994a9c01b1b--close"></label></span>
        <div class="accordion__item--content inherit ">
                        <div><p>Send them a standout gift that’s environmentally friendly and multi-functional. We’ve paired our classic cedar wood journal with a black precision-point pen to add even more beauty to the written word. A sleek, double-insulated travel tumbler helps bring their favorite beverage along for the ride—and keeps it hot or cold—from coffee to wine. Choose this gift to celebrate a colleague, relative, or friend while also supporting reforestation efforts and eco-friendly production.<br></p>
<p>Each gift is packaged in our recyclable Packed with Purpose box and includes:<br></p>
<style type="text/css"><!--
td {border: 1px solid #ccc;}br {mso-data-placement:same-cell;}
--></style>
<ul>
<li>Handcrafted classic wood journal, USA-Made (6" x 9")</li>
<li>Quick-drying, smudge-resistant fine point pen in black</li>
<li>Insulated stainless steel black beverage tumbler with removable drinking lid, 10 oz.<br>
</li>
<li>An artful booklet that showcases the stories of our Impact Partners and the meaningful impact our gifts create</li>
</ul>
<p></p></div>
        </div>
    </label>
</div>
<div class="col-12 accordion product__accordion margin__bottom--reduced">
    <input type="radio" id="cfa26ceb-62c7-4683-996a-6a3f79898c4d--close" name="cfa26ceb-62c7-4683-996a-6a3f79898c4d">
    <label class="accordion__item">
        <input type="radio" name="cfa26ceb-62c7-4683-996a-6a3f79898c4d">
        <span class="accordion__item--title">Impact<label class="collapse" for="cfa26ceb-62c7-4683-996a-6a3f79898c4d--close"></label></span>
        <div class="accordion__item--content inherit ">
<div><p></p>
<style type="text/css"><!--
td {border: 1px solid #ccc;}br {mso-data-placement:same-cell;}
--></style>
<p><strong><a href="https://packedwithpurpose.gifts/our-impact/purposeful-purveyors/woodchuck-usa/" target="_blank"><span data-sheets-userformat="{&quot;2&quot;:513,&quot;3&quot;:{&quot;1&quot;:0},&quot;12&quot;:0}" data-sheets-value="{&quot;1&quot;:2,&quot;2&quot;:&quot;WOODCHUCK USA&quot;}">WOODCHUCK US</span>A</a></strong>&nbsp;-&nbsp;Creates eco-friendly wood products and plants one tree for every purchase made to help reforest the world; made in the USA</p>
<p><strong><a href="https://packedwithpurpose.gifts/our-impact/purposeful-purveyors/uchida/" data-mce-href="https://packedwithpurpose.gifts/our-impact/purposeful-purveyors/uchida/">Marvy Uchida</a>&nbsp;</strong>- Inspires art and creativity for all through their high-quality arts, crafts, and office products for more than 40 years</p>
<p><span data-sheets-value="{&quot;1&quot;:2,&quot;2&quot;:&quot;Reduces waste and energy consumption across the entire supply chain, and packages with 100% recycled cardboard. &quot;}" data-sheets-userformat="{&quot;2&quot;:13185,&quot;3&quot;:{&quot;1&quot;:0},&quot;10&quot;:2,&quot;11&quot;:4,&quot;12&quot;:0,&quot;15&quot;:&quot;Calibri&quot;,&quot;16&quot;:8}"><a href="https://packedwithpurpose.gifts/our-impact/purposeful-purveyors/ecovessel/"><strong>Ecovessel</strong></a>&nbsp;- Creates premium reusable drinkware to reduce the world's dependence on single-use plastics; 1% for the Planet member, woman-founded </span></p></div>
        </div>
    </label>
</div>
<div class="col-12 accordion product__accordion ">
    <input type="radio" id="04f337be-f8e2-41b0-9f06-740077e6b722--close" name="04f337be-f8e2-41b0-9f06-740077e6b722">
    <label class="accordion__item">
        <input type="radio" name="04f337be-f8e2-41b0-9f06-740077e6b722">
        <span class="accordion__item--title">Additional Info<label class="collapse" for="04f337be-f8e2-41b0-9f06-740077e6b722--close"></label></span>
        <div class="accordion__item--content inherit ">
                <p>Given the highly seasonal nature of gifting and the unique supply chain challenges presented by COVID-19, Packed with Purpose requests flexibility on the flavors, scents, and specific products featured in each gift. Our team thoroughly vets all products to guarantee any substitutions are of equal quality and impact and encompass the high standards we require of all our purveyors.</p>
        </div>
    </label>
</div>

Answer 1

我会这样做。辅助函数直接作用于 DOM 元素，而不是模拟点击。

//  an array of elements
const allAccordionElements = Array.from(document.querySelectorAll(".accordion__item"));

const run_code = () => {

  //  some helper functions
  const showTab = (el) => {
    el.style.display = "flex";
  };
  const hideTab = (el) => {
    el.style.display = "none";
  };

  if (allAccordionElements.length > 0) {
    
    // open the first one
    showTab(allAccordionElements[0]);
    
    //  hide all others
    allAccordionElements.slice(1).forEach(thisTab => {
      hideTab(thisTab);
    });  
  
  }
  
};

document.getElementById('run').addEventListener('click',run_code);

.accordion__item {
  padding: 0.5em;
  margin: 0.5em;
  border: 2px dotted green;
  background-color: silver;
  display: flex;
}

<div class="accordion">

  <div class="accordion__item">
    item one
  </div>
  <div class="accordion__item">
    item two
  </div>
  <div class="accordion__item">
    item three
  </div>

</div>

<button id="run">run code</button>