Materialise 手风琴在 Algolia 模板中不起作用

Question

我正在尝试将 Algolia 产品收益的描述放在 Materialise 的手风琴中，但当我点击它时它不会触发。

这是我认为的代码：

    <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，在这些新创建的 DOM 元素上调用 .collapsible() :

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

这还将对已经调用过的元素调用 .collapsible()。我不知道 collapsible，如果你在同一个元素上调用它两次，它的行为可能是错误的。
为避免这种情况，您将只想定位尚未调用它的元素。 collapsible 可能会在那些 DOM 元素上添加属性或 class，您可以在选择器中排除这些元素。
否则你可以像这样自己添加它：

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

Materialise 手风琴在 Algolia 模板中不起作用

Materialize accordion don't work in Algolia template

jquery

materialize

algolia