Foundation 6手风琴不开放

Question

我在使用JavaScript生成Foundation 6手风琴部分时遇到问题，无法正常打开。我审视了类似的问题，但他们的答案似乎没有任何帮助。

我已经创建了一个codepen，其中包含我试图制作的手风琴的HTML版本，以及一个会导致Javascript生成应该是相同html的精确副本的按钮。 HTML构建版本按预期工作，但Javascript构建版本在点击时不会展开。

是否需要额外的步骤才能让手风琴在由Javascript（例如事件处理程序）生成时运行？

https://codepen.io/douglastaylor/pen/qXroev

这里的HTML：

<h4>This is built into the HTML</h4> 

<ul class="accordion accordion-client" id="accordionResults" role="tablist" data-accordion data-allow-all-closed="true"> 

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

<a href="#acc1" id="acc1_label" role="tab" aria-controls="acc1" class="accordion-title">Accordion 1</a> 

<div id="acc1" role="tabpanel" aria-labelledby="acc1_label" class="accordion-content" data-tab-content> 

<ul class="accordion show-for-small accordion-details" id="acc1_container" role="tablist" data-accordion data-allow-all-closed="true"> 

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

<a href="#acc1_details" id="acc1_details_label" role="tab" aria-controls="acc1_details" class="accordion-title">Details</a> 

<div id="acc1_details" role="tabpanel" class="accordion-content" aria-labelledby="acc1_details_label" data-tab-content> 

Text inside sub accordion 1 

</div> 

</li> 

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

<a href="#acc1_features" id="acc1_features_label" aria-controls="acc1_features" role="tab" class="accordion-title">Features</a> 

<div id="acc1_features" role="tabpanel" class="accordion-content" aria-labelledby="acc1_features_label" data-tab-content> 

Text inside sub accordion 2 

</div> 

</li> 

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

<a href="#acc1_statistics" id="acc1_statistics_label" aria-controls="acc1_statistics" role="tab" class="accordion-title">Statistics</a> 

<div id="acc1_statistics" role="tabpanel" class="accordion-content" aria-labelledby="acc1_statistics_label" data-tab-content> 

Text inside sub accordion 3 

</div> 

</li> 

</ul> 

</div> 

</li> 

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

<a href="#acc2" id="acc2_label" role="tab" aria-controls="acc2" class="accordion-title">Accordion 2</a> 

<div id="acc2" role="tabpanel" aria-labelledby="acc2_label" class="accordion-content" data-tab-content> 

<ul class="accordion show-for-small accordion-details" id="acc2_container" role="tablist" data-accordion data-allow-all-closed="true"> 

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

<a href="#acc2_details" id="acc2_details_label" role="tab" aria-controls="acc2_details" class="accordion-title">Details</a> 

<div id="acc2_details" role="tabpanel" class="accordion-content" aria-labelledby="acc2_details_label" data-tab-content> 

Text inside sub accordion 1 

</div> 

</li> 

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

<a href="#acc2_features" id="acc2_features_label" aria-controls="acc2_features" role="tab" class="accordion-title">Features</a> 

<div id="acc2_features" role="tabpanel" class="accordion-content" aria-labelledby="acc2_features_label" data-tab-content> 

Text inside sub accordion 2 

</div> 

</li> 

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

<a href="#acc2_statistics" id="acc2_statistics_label" aria-controls="acc2_statistics" role="tab" class="accordion-title">Statistics</a> 

<div id="acc2_statistics" role="tabpanel" class="accordion-content" aria-labelledby="acc2_statistics_label" data-tab-content> 

Text inside sub accordion 3 

</div> 

</li> 

</ul> 

</div> 

</li> 

</ul> 

<h4>This is generated by Javascript</h4> 

<div id="content"></div>  

而这里的Java脚本：

$(document).foundation(); 

var html = ''; 

html += '<ul class="accordion accordion-client" id="accordionResults" role="tablist" data-accordion data-allow-all-closed="true"> '; 

html += '<li class="accordion-item" data-accordion-item> '; 

html += '<a href="#acc1" id="acc1_label" role="tab" aria-controls="acc1" class="accordion-title">Accordion 1</a>'; 

html += '<div id="acc1" role="tabpanel" aria-labelledby="acc1_label" class="accordion-content" data-tab-content>'; 

html += '<ul class="accordion show-for-small accordion-details" id="acc1_container" role="tablist" data-accordion data-allow-all-closed="true">'; 

html += '<li class="accordion-item" data-accordion-item> '; 

html += '<a href="#acc1_details" id="acc1_details_label" role="tab" aria-controls="acc1_details" class="accordion-title">Details</a> '; 

html += '<div id="acc1_details" role="tabpanel" class="accordion-content" aria-labelledby="acc1_details_label" data-tab-content> '; 

html += 'Text inside sub accordion 1'; 

html += '</div>'; 

html += '</li>'; 

html += '<li class="accordion-item" data-accordion-item> '; 

html += '<a href="#acc1_features" id="acc1_features_label" aria-controls="acc1_features" role="tab" class="accordion-title">Features</a> '; 

html += '<div id="acc1_features" role="tabpanel" class="accordion-content" aria-labelledby="acc1_features_label" data-tab-content>'; 

html += 'Text inside sub accordion 2'; 

html += '</div>'; 

html += '</li>'; 

html += '<li class="accordion-item" data-accordion-item> '; 

html += '<a href="#acc1_statistics" id="acc1_statistics_label" aria-controls="acc1_statistics" role="tab" class="accordion-title">Statistics</a> '; 

html += '<div id="acc1_statistics" role="tabpanel" class="accordion-content" aria-labelledby="acc1_statistics_label" data-tab-content> '; 

html += 'Text inside sub accordion 3'; 

html += '</div>'; 

html += '</li>'; 

html += '</ul>'; 

html += '</div> '; 

html += '</li> '; 

html += '<li class="accordion-item" data-accordion-item> '; 

html += '<a href="#acc2" id="acc2_label" role="tab" aria-controls="acc2" class="accordion-title">Accordion 2</a>'; 

html += '<div id="acc2" role="tabpanel" aria-labelledby="acc2_label" class="accordion-content" data-tab-content>'; 

html += '<ul class="accordion show-for-small accordion-details" id="acc2_container" role="tablist" data-accordion data-allow-all-closed="true">'; 

html += '<li class="accordion-item" data-accordion-item> '; 

html += '<a href="#acc2_details" id="acc2_details_label" role="tab" aria-controls="acc2_details" class="accordion-title">Details</a> '; 

html += '<div id="acc2_details" role="tabpanel" class="accordion-content" aria-labelledby="acc2_details_label" data-tab-content> '; 

html += 'Text inside sub accordion 1'; 

html += '</div>'; 

html += '</li>'; 

html += '<li class="accordion-item" data-accordion-item> '; 

html += '<a href="#acc2_features" id="acc2_features_label" aria-controls="acc2_features" role="tab" class="accordion-title">Features</a> '; 

html += '<div id="acc2_features" role="tabpanel" class="accordion-content" aria-labelledby="acc2_features_label" data-tab-content>'; 

html += 'Text inside sub accordion 2'; 

html += '</div>'; 

html += '</li>'; 

html += '<li class="accordion-item" data-accordion-item> '; 

html += '<a href="#acc2_statistics" id="acc2_statistics_label" aria-controls="acc2_statistics" role="tab" class="accordion-title">Statistics</a> '; 

html += '<div id="acc2_statistics" role="tabpanel" class="accordion-content" aria-labelledby="acc2_statistics_label" data-tab-content> '; 

html += 'Text inside sub accordion 3'; 

html += '</div>'; 

html += '</li>'; 

html += '</ul>'; 

html += '</div> '; 

html += '</li> '; 

html += '</ul>'; 

$('#content').html(html); 

Answer 1

的问题是，基金会运行你的js代码插入HTML之前..

在您的js之后添加基础实例..

$('#content').html(html); 
$(document).foundation(); 

Codepen