Question

在MaterialiseCSS中，有一种特定的语法来调用它们的预制图标。这是一个例子：

<i class="material-icons">expand_more</i>

框架根据i标签之间的文本知道您想要的图标。我正在尝试使用jQuery创建一个可折叠的div，我想让图标在向上和向下箭头之间切换。为此，我需要替换i标签之间的文本。

我成功地能够改变它一次，但是当我崩溃div时却没有回来。这是我的代码：

＆＃13;

$('.remove-text').click(function() {
  $(this).closest('.card').toggleClass('collapsed');
  if ($('.arrow-change').text = 'expand_more') {
    $('.arrow-change').text('expand_less');
  } else {
    $('.arrow-change').text('expand_more');
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="remove-text">
  <i class="material-icons arrow-change">expand_more</i>
</div>

＆＃13;

Answer 1

您使用=实际上是设置了值，实际需要的是==或===这是一个比较。

double equals不会强制执行类型匹配，但三元组会执行。

此外，它是text()，而不仅仅是text，因为您正在使用jQuery。如果你想使用香草，它将是innerText。

Answer 2

尝试使用此slideToggle()

$( "#collapsibleDiv" ).slideToggle( "slow", function() {
// Animation complete.

}）;

这是我的plunkr

Answer 3

试试这个：

$('.remove-text').click(function() {

var parent_child = $(this);

parent_child.toggleClass('collapsed');

if(parent_child.hasClass('collapsed')){
    parent_child.children('i.arrow-change').text('expand_less');
}else{
    parent_child.children('i.arrow-change').text('expand_more');
}

});

示例：https://jsfiddle.net/r5152vna/

如何使用jQuery和MaterializeCSS进行图标切换？

3 个答案: