对于我们写前端页面的而言，经常会看到许多上下箭头的切换的操作，例如像当你点击v变成了^箭头它就展示你需要的东西，听起来有点像折叠菜单，它主要运用场景就是像我们写帮助菜单或者一些标签切换上，下面我介绍这种关于上下箭头的mui的做法
方法/步骤
-
第一步 引入jquery 和mui
代码如下：
<link rel="stylesheet" href="../../css/mui.min.css" />
<script src="../../js/jquery.js"></script>
<link rel="stylesheet" href="../../css/fontIcons/iconfont.css" />
<script type="text/javascript" src="../../js/mui.min.js"></script>
整体代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<link rel="stylesheet" href="../../css/mui.min.css" />
<script src="../../js/jquery.js"></script>
<link rel="stylesheet" href="../../css/fontIcons/iconfont.css" />
<script type="text/javascript" src="../../js/mui.min.js"></script>
</head>
<body>
<span class="mui-icon mui-icon-arrowup"></span>
<!--mui提供了上下箭头的图标，你直接引用它即可无需 -->
<script>
$(function() {
} )
</script>
</body>
</html>
-
第二步 你要做的是将上箭头变化成下箭头的样式方法其实很箭头，怎么把span中class中 mui-icon-arrowup换成mui-icon-arrowdown，然后你就要做条件判断即可，当它得class是mui-icon-arrowup，你要替换成mui-icon-arrowdown，当它是mui-icon-arrowdown，你要替换成mui-icon-arrowup
代码如下：
$("span").on('click',function(){
if($(this).find(".mui-icon").hasClass("mui-icon-arrowdown")) {
$(this).find(".mui-icon").addClass("mui-icon-arrowup").removeClass("mui-icon-arrowdown");
} else {
$(this).find(".mui-icon").addClass("mui-icon-arrowdown").removeClass("mui-icon-arrowup");
}
);
整体代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<link rel="stylesheet" href="../../css/mui.min.css" />
<script src="../../js/jquery.js"></script>
<link rel="stylesheet" href="../../css/fontIcons/iconfont.css" />
<script type="text/javascript" src="../../js/mui.min.js"></script>
</head>
<body>
<span class="mui-icon mui-icon-arrowup"></span>
<!--mui提供了上下箭头的图标，你直接引用它即可无需 -->
<script>
$(function() {
$("span").on('click',function(){
if($(this).find(".mui-icon").hasClass("mui-icon-arrowdown")) {
$(this).find(".mui-icon").addClass("mui-icon-arrowup").removeClass("mui-icon-arrowdown");
} else {
$(this).find(".mui-icon").addClass("mui-icon-arrowdown").removeClass("mui-icon-arrowup");
}
);
} )
</script>
</body>
</html>