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