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

在MaterializeCSS中有一个特定的语法来调用它们的预制图标。这是一个例子：如何使用jQuery和MaterializeCSS使图标切换？

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

框架根据i标签之间的文本知道你想要的图标。我正在尝试使用jQuery创建一个可折叠的div，我希望图标可以在向上和向下箭头之间切换。为了做到这一点，我需要替换i标签之间的文本。

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

$('.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'); 
 
    } 
 
});

<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>

来源

2017-03-15 RP12

您使用的=实际上是设定值，你真正想要的是==或===这是一个比较。

双等于不强制类型匹配，但三重。

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

来源

2017-03-15 16:40:05 Slime

谢谢你的工作！ – RP12

尝试使用此slideToggle()

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

}）;

这里是我的plunkr

来源

2017-03-15 16:42:32 SrAxi

试试这个：

$('.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/

来源

2017-03-15 18:47:05

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

回答

相关问题