フロントエンドを構築しようとしていますが、折りたたみ可能な要素を使用したいと考えています。問題は、何もしないことです。ヘッダー ボックスをクリックすることはできますが、何も起こりません。
ドキュメントによると、動的に追加された場合、要素を「初期化」する必要があります。
だから私はDom要素を破壊して作成するすべてのアクションの後にこれをやっています:
function setUpPageElements () {
$.each($('.collapsible'), function (index,value) {
value.collapsible({
accordion : true
});
})
};
そして、これが私のERBテンプレートです
<ul class="collapsible" data-collapsible"accordion">
<% if jobs.first %>
<% jobs.each do |job| %>
<%= render partial: 'job', locals: {job: job} %>
<% end %>
<% else %>
<li >
<section id="header" class="collapsible-header active" > <p id="name">No active jobs</p></section>
<section class="collapsible-body">
There are currently no active jobs.
You can create new jobs by creating selecting 'New Job from navigation bar along the top'
</section>
</li>
<% end %>
</ul>