Foundation 6 手风琴未打开

Question

当由 JavaScript 生成时，我在让 Foundation 6 手风琴部分正确打开时遇到问题。我查看了类似的问题，但他们的答案似乎都没有帮助。

我已经创建了一个代码笔，其中包含我正在尝试制作的手风琴的 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>    

这里是 Javascript：

$(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 之前，foundation 正在运行。

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

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

Codepen