如何使用jQuery和MaterializeCSS切换图标？
使用jQuery和MaterializeCSS切换图标可以通过以下步骤实现：
- 首先，确保你已经引入了jQuery和MaterializeCSS的相关文件。可以通过以下方式引入它们：
<!-- 引入jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- 引入MaterializeCSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>- 在HTML中创建一个图标元素，例如一个按钮，使用MaterializeCSS提供的图标类。例如，使用
<i>标签和material-icons类来创建一个带有初始图标的按钮：
<a id="icon-toggle" class="btn"><i class="material-icons">favorite</i></a>- 使用jQuery选择器选中该图标元素，并为其添加点击事件处理程序。在点击事件处理程序中，使用jQuery的
toggleClass()方法来切换图标的类。例如，切换favorite和favorite_border两个图标：
$(document).ready(function() {
$('#icon-toggle').click(function() {
$('i', this).toggleClass('favorite favorite_border');
});
});- 最后，确保在页面加载完成后调用jQuery代码。可以使用
$(document).ready()方法来实现。
这样，当点击按钮时，图标的类将切换，从而改变图标的显示。
关于jQuery和MaterializeCSS的更多详细用法和示例，你可以参考以下链接：
- jQuery官方文档：https://jquery.com/
- MaterializeCSS官方文档：https://materializecss.com/
请注意，以上答案仅供参考，具体实现方式可能因具体项目需求和版本而有所不同。
相关·内容
1回答
固定动作按钮不能正常工作？
html、css、materialize
我正在努力学习物化(materializecss.com)，我被困在如何制作动作按钮。左下角的按钮出现，但当我悬停时，其他按钮就不会出现。
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
&l
浏览 0提问于2018-04-09得票数 0
回答已采纳
3回答
如何在不更改按钮图标的情况下更改按钮的文本
javascript、html、button、icons、materialize
我有一个带有pause_circle_outline物化图标的“暂停”按钮，当它单击时，我想将文本更改为“恢复”，并将图标更改为play_circle_outline，但是当我试图更改文本时，它更改了文本并删除了该图标。下面是我的代码片段示例：
jQuery(document).ready(function($){
$(document.getElementById("pause_btn")).click(function(){
document.getElementById("pause_btn").innerText = "
浏览 8提问于2022-02-07得票数 0
回答已采纳
1回答
Django MaterializeCSS -工作，但不确定设置css和js的正确方式？
django、materialize
我正在使用Materializecss设计Django项目--例如，用浮动按钮构建了一个页面。
为什么不起作用？
我开始使用来自网站的模板：，并从页面中的CDN部件中更新：
<!--Import materialize.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
And added at the bottom:
<sc
浏览 2提问于2020-06-19得票数 2
2回答
Materialize CSS dropdown在Blazor中不起作用(服务器端)
html、css、dropdown、materialize、blazor-server-side
我已经使用MaterializeCSS (https://materializecss.com)构建了一个“纯超文本标记语言”模板。 在模板内部，我有一个下拉菜单，它在单击事件后按预期显示。我的代码如下： <header>
<!-- Dropdown sub-menu -->
<ul id="dropdown-menu-profile" class="dropdown-content">
<li><a href="#"><i class="material-icons
浏览 12提问于2020-09-03得票数 0
1回答
如何将JQuery ReplaceWith与materials.io图标结合使用
javascript、html、jquery、onclick
想要favorite_border图标切换到喜欢的图标点击。
因为我们使用material.io，而且类是两个图标的材料图标，所以不确定如何使用jquery。我该怎么办？(这样我们就可以继续使用这些图标)
谢谢
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<script src="jquery-3.4.1.min.js"></script>
</hea
浏览 4提问于2020-05-04得票数 0
回答已采纳
2回答
神话按钮触发什么都不会发生
javascript、html、css、material-design、materialize
我使用的是设计。我选择使用卡片中使用的FAB来显示由不同类型的对象组成的内容。现在，我尝试添加模态底片样式，并使用浮动动作按钮作为模态的触发器，但下面没有显示任何内容。我的代码如下：
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/l
浏览 2提问于2017-04-10得票数 1
回答已采纳
2回答
将图标与drowdown中的文本对齐
html、css、icons、materialize
我正在尝试将图标与下拉按钮中文本的左侧对齐，但我不确定如何操作。 <ul id="dropdown1" class="dropdown-content">
<li><a href="#!">Profile</a></li>
<li><a href="#!">Receipts</a></li>
<li class
浏览 21提问于2019-02-18得票数 1
回答已采纳
2回答
为什么在SCSS文件中写入的暗主题颜色不适用？
javascript、html、css、materialize、darkmode
我试图添加一个黑暗主题切换按钮到我的网页，我在互联网上查找代码，我看到了下面的例子。我将代码复制到VS代码编辑器中，当我单击切换按钮时，它的图标正在改变，但窗口保持白色
我从这个代码站点提取了代码，并删除了所有不相关的html元素：。
这是代码：
// SIDENAV
$(document).ready(function() {
$('.sidenav').sidenav();
// SWAP ICON ON CLICK
// Source: https://stackoverflow.com/a/34254979/751570
$('.dark
浏览 6提问于2021-12-26得票数 0
回答已采纳
1回答
需要帮助才能让这个下拉菜单正常工作
javascript、html
我听从了的指示，仍然无法让这个掉落开始工作。
$(document).ready(function() {
$('.dropdown-trigger').dropdown();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.clo
浏览 5提问于2020-03-28得票数 0
回答已采纳
1回答
物化导航栏下拉菜单不起作用
javascript、html
由于某些原因，我导航栏中的下拉菜单无法工作。dropdown按钮在那里，但它没有下降，所以下拉按钮的触发部分可能有问题。我已经尝试了所有的方法，但我不能修复它，任何帮助都是非常感谢的。下面是materialize文档的链接：https://materializecss.com/navbar.html {% load static %}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Casual Clothing comparer<
浏览 10提问于2020-08-27得票数 0
回答已采纳
2回答
如何在物化css中向右浮动图标？
jquery、html、css、materialize
我试图使一个图标浮动到可折叠标题的右侧，但它不起作用。我使用了style="float:right"，但是图标保持在相同的位置。以下是代码：
$(document).ready(function () {
$('.collapsible').collapsible();
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Course List<
浏览 1提问于2018-05-07得票数 1
回答已采纳
1回答
如何解决materialise nav-bar问题？
javascript、html、jquery、materialize
我正在尝试使用materialise在导航栏中添加一个下拉菜单，但它不起作用。我正在添加代码片段。除此之外，我还导入了materialise CSS和头部的图标，以及身体里的JS和JQuery。
有人能帮我指出哪里出了问题吗？这是文档
<ul id="dropdown1" class="dropdown-content">
<li><a href="./music/index.html">Bollywood Music</a></li>
<li>
浏览 1提问于2021-08-03得票数 0
3回答
无法使已修复的操作按钮在物化CSS中工作
html、css、materialize
我正在关注youtube上的Materialize CSS教程，并按照它的说明创建FAB。但是，当我滚动到该按钮时，图标不会出现。我不确定为什么会发生这种情况。
我在互联网上四处寻找，还没有找到解决这个问题的办法。这可能是jQuery的一个问题，但我已经从Materialize网站复制并粘贴了设置代码。
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<div class="fi
浏览 2提问于2018-12-29得票数 1
2回答
Materializecss可折叠组件无法正常工作
javascript、html、materialize
我最近开始使用materializecss制作网站。一切都很顺利，除了我不能让折叠器正常工作。它们出现在我的网站上，但根本无法点击。我已经导入了所有的css & js文件，但这似乎没有帮助。 <html>
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link type="text/css" rel="stylesheet
浏览 25提问于2018-12-30得票数 6
回答已采纳
1回答
将导航条中的搜索输入与物化对齐
html、css、materialize
我正在尝试构建一个物化导航栏，其中一些图标和搜索栏都是对齐的。我已经接近了，但是当我点击搜索时，输入框的位置太高了。实际上，我希望能够允许用户单击搜索图标，并将该条扩展到整个导航栏。但我不能先解决这个问题。
我写了一个来说明我的问题。您可能需要伸展结果面板取决于您的屏幕大小。我需要改变什么？这是HTML
$(document).ready(function() {
$(".button-collapse").sideNav();
});
<link rel="stylesheet" type="text/css" href="
浏览 1提问于2017-02-09得票数 1
回答已采纳
1回答
如何使菜单按钮出现在Nav物化CSS中？
javascript、jquery、html、css、materialize
$(document).ready(function() {
$('.sidenav').sidenav();
});
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cd
浏览 0提问于2019-03-07得票数 1
回答已采纳
2回答
来自物化CSS的可折叠元素在Apps脚本侧边栏HTML中没有展开
javascript、html、css、google-apps-script
我的工作是大量的信息显示在侧边栏，但在扩展手风琴有困难。元素来自MaterializeCSS.com
我使用以下方法调用打开html：
function sideBar2(){
var sideHtml = HtmlService.createTemplateFromFile('detailed-calculations').evaluate();
SpreadsheetApp.getUi().showSidebar(sideHtml);
}
这是我使用的html文件：
<html>
<head>
<base target=&#
浏览 4提问于2021-09-02得票数 2
回答已采纳
2回答
Jquery和bootstrap
javascript、jquery、html、css、twitter-bootstrap
我正在试用
当我看到他们在这里提供的演示时：
我将窗口变小，它将链接放在导航栏中，并在左上角显示一个图标。当你点击图标时，它会打开导航栏。
但是当我下载他们在这里为启动的模板提供的源代码时：
当我运行代码时，我的导航栏将无法打开...
index.html代码为：
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<
浏览 0提问于2015-06-30得票数 3
1回答
如何在html中向select元素添加更多选项？
javascript、html、css、select、materialize
我尝试使用物化css库在html中创建一个select元素，当我尝试向select添加动态选项时(例如，列表中的每个元素都是select的一个选项)，我找不出它为什么只添加第一个元素
这是我的代码：
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src = "https://code.jquery.com/jquery
浏览 7提问于2022-01-16得票数 0
回答已采纳
5回答
将图标放在手风琴的右端。
html、css、materialize
我使用物化css框架制作了以下可折叠手风琴。
我正在尝试将雪佛龙图标放在可折叠头部的末尾。我已经应用css类来使图标浮动到可折叠标题的右侧，但这并不能使它完成可折叠标题的右侧。
什么是最好的措施，以移动雪佛龙图标到右端的可折叠头部位置。
$('.collapsible').collapsible();
.collapsible li.active i {
-ms-transform: rotate(180deg); /* IE 9 */
-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
浏览 0提问于2018-10-30得票数 3
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
