Question

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

我已经创建了一个带有我试图制作的手风琴的HTML版本的codepen，以及一个会导致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

基础6手风琴不开放

1 个答案: