使用 javascript for 循环构建基础手风琴

Question

我想使用 for 循环构建基础手风琴元素。
Foundation 文档中手风琴的基本示例如下所示：

<ul class="accordion" data-accordion>
  <li class="accordion-item" data-accordion-item>

    <!-- Accordion tab title -->
    <a href="#" class="accordion-title">Accordion 1</a>    
    <!-- Accordion tab content -->
    <div class="accordion-content" data-tab-content>
     <p>Panel 1. Lorem ipsum dolor</p>
     <a href="#">Nowhere to Go</a>
    </div>

  </li>
  <!-- ... -->

</ul>

我列表中的每个 <li> 元素都来自 json 文件并使用 for 循环添加，如下所示：

var listing = listings.appendChild(document.createElement('li'));
    listing.className = 'accordion-item';

这给了我正确的 <li class="accordion-item" 术语，但是我如何添加 data-accordion-item 术语？

Answer 1

好的，感谢iSZ。 listing.setAttribute('data-accordion-item', ""); 成功了。

使用 javascript for 循环构建基础手风琴

foundation accordion build with javascript for loop

javascript

zurb-foundation