如何在mui裡面進行箭頭的上下切換操作？
對於我們寫前端頁面的而言，經常會看到許多上下箭頭的切換的操作，例如像當你點選v變成了^箭頭它就展示你需要的東西，聽起來有點像摺疊選單，它主要運用場景就是像我們寫幫助選單或者一些標籤切換上，下面我介紹這種關於上下箭頭的mui的做法
工具/原料
- jquery mui
方法/步驟
-
1
第一步 引入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>
-
2
第二步 你要做的是將上箭頭變化成下箭頭的樣式方法其實很箭頭，怎麼把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>