Foundation 6 手风琴未打开

Question

当 JavaScript 生成 Foundation 6 手风琴部分时，我无法正确打开它。我浏览了类似的问题，但 none 他们的回答似乎有所帮助。

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

之前基础是运行

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

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

Codepen

Foundation 6 手风琴未打开

Foundation 6 Accordion not opening

javascript

zurb-foundation