Materialized accordion在Algolia模板中不起作用

Question

我試圖在Materialise的手風琴中將Algolia的產品增益描述，並且它不會在我點擊它時觸發。

下面是我的看法代碼：

<div class="row"> 
    <div id="hits-container"></div> 
    </div> 

<script src="https://cdn.jsdelivr.net/instantsearch.js/1/instantsearch.min.js"></script> 
<script src="<?php echo js_url('jquery.min')?>"></script> 
<script src="<?php echo js_url('initialization')?>"></script> 
<script src="<?php echo js_url('pluginAlgolia')?>"></script> 
<script src="<?php echo js_url('materialize.min')?>"></script> 
<script> 
    $(document).ready(function(){ 
    $('select').material_select(); 
    $('.collapsible').collapsible(); 
    }); 
</script> 

這裏是pluginAlgolia.js的命中控件的代碼：

search.addWidget(
instantsearch.widgets.hits({ 
    container: '#hits-container', 
    hitsPerPage: 6, 
    templates: { 
    empty: noResultsTemplate, 
    item: hitTemplate 
    } 
    }) 
); 

下面是在initialization.js模板：

var hitTemplate = 
'<div class="col s12 m6 l4">' + 
    '<article class="hit">' + 
    '<div class="product-picture-wrapper center">' + 
    '<div class="product-picture"><img src="{{image}}" /></div>' + 
    '</div>' + 
    '<div class="product-name"><h4>{{{_highlightResult.designation.value}}}</h4></div>' + 
    '<ul class="collapsible" data-collapsible="accordion">' + 
     '<li>'+ 
     '<div class="collapsible-header">Description</div>' + 
     '<div class="collapsible-body">' + 
      '{{{_highlightResult.description.value}}}' + 
     '</div>' + 
     '</li>' + 
     '</ul>' + 
    '<div class="product-price">${{prixttc}}</div>' + 
    '</article>' + 
    '</div>'; 

Answer 1

您只需撥打.collapsible()就會發生DOM已滿載第一次。

但是，每次instantsearch.js都會呈現您的模板，它將向DOM添加從未調用過.collapsible()的新元素。

但是，您可以使用instantsearch.js的render event，調用.collapsible()這些新創建的DOM元素：

search.on('render', function() { 
    $('.collapsible').collapsible(); 
}); 

這也將調用.collapsible()上它已經被稱爲元素。我不知道collapsible，如果你在同一個元素上調用它兩次，它的行爲可能是錯誤的。
爲了避免這種情況，您只需要定位未被調用的元素。 collapsible可能會在這些DOM元素上添加屬性或類，您可以在選擇器中排除這些屬性或類。
否則，你可以簡單地將自己添加這樣的：

search.on('render', function() { 
    $('.collapsible:not(.collapsible-called)').collapsible().addClass('collapsible-called'); 
});