Question

材料化CSS具有集合https://materializecss.com/collections.html

我想知道是否有特定的方法可以随时向集合中添加新项目，或者我应该以某种方式使用jquery自己构造html？

Answer 1

由于当我寻找类似问题时，这是我的第一个搜索结果中的链接，因此我将用到目前为止的知识回答。

没有内置的选项/方法可以将列表项动态添加到集合中，但是您可以使用JQuery来做到这一点。

$('.add-item').click(function() {
  $('.collection').append('<li class="collection-item">item<a href="#!" class="remove-item secondary-content"><i class="material-icons mat-red-text">remove_circle_outline</i></a></li>');
});
$('.collection').on('click', '.remove-item', function() {
  $(this).closest('li').remove();
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="section container">
  <ul class="collection">
    <li class="collection-item">
      item
      <a href="#!" class="remove-item secondary-content">
      <i class="material-icons mat-red-text">remove_circle_outline</i>
    </a>
    </li>
  </ul>
  <button class="btn add-item">add</button>
</div>

该代码段应该可以使用，虽然不完整，但是应该可以使用。

我要指出的是对删除部分使用.on（）方法。在将具有自己事件的元素动态添加到DOM时，需要使用.on（），否则事件不会被触发。只需将remove与.click（）结合使用，就无法动态添加元素；

特别是对于materializecss，ul中最后一个li的样式存在一个小问题，您会注意到一个额外的底部边界。我仍然需要找出解决方法。

如何添加新项目以实现CSS集合？

1 个答案: