实现点击下箭头变上箭头来回切换的两种方法【推荐】


Posted in Javascript onDecember 14, 2016

我所知道的常用的就这两种。

第一种:说明一下我用的是fontawesome字体,首先要去官网下载来用

<span class='btn btn-more'>
 <i class='fa fa-angle-down'></i>
 <i class='fa fa-angle-up hidden'></i>
</span>

我用的是bootstrap,所以hidden是自带的,上面的初始状态就是下箭头angle-down是显示的,然后上箭头angle-up是hidden的.

js代码:

$('.btn-more').click(function(ev){
 
  $(this).children('.fa-angle-down').toggleClass('hidden');
  $(this).children('.fa-angle-up').toggleClass('hidden');
 })

就这样,上下箭头就可以来回切换了,一般来说就是显示内容的时候可能会用到呢

第二种方法就是,html代码

<li class="sub-item">
 <a href="javascript:;">       
 <span class="arrow"></span>
 </a>
</li>

css代码

.arrow:before {
 float: right;
 width: 20px;
 text-align: center;
 display: inline;
 font-size: 16px;
 font-family: FontAwesome;
 height: auto;
 content: "\f104";
 font-weight: 300;
 text-shadow: none;
 position: absolute;
 top: 4px;
 right: 14px;
 color: #990;
}
.arrow.open:before{
content: '\f107';
}

js代码就是

$('.nav-item>a').click(function(){
$(this).children('.arrow').toggleClass('open')
})

第二种方法主要就是通过添加一个class来覆盖之前的那个content,同样是fonawesome的字体哈

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
javascript的事件描述
Sep 08 Javascript
JavaScript prototype属性使用说明
May 13 Javascript
使用js画图之正弦曲线
Jan 12 Javascript
JavaScript使用concat连接数组的方法
Apr 06 Javascript
详解Bootstrap glyphicons字体图标
Jan 04 Javascript
Angularjs中controller的三种写法分享
Sep 21 Javascript
js中json处理总结之JSON.parse
Oct 14 Javascript
BootStrap3中模态对话框的使用
Jan 06 Javascript
详解基于node的前端项目编译时内存溢出问题
Aug 01 Javascript
一文了解Vue中的nextTick
May 06 Javascript
JS多个表单数据提交下的serialize()应用实例分析
Aug 27 Javascript
NProgress显示顶部进度条效果及使用详解
Sep 21 Javascript
jQuery 常见小例汇总
Dec 14 #Javascript
javascript基本数据类型及类型检测常用方法小结
Dec 14 #Javascript
用v-html解决Vue.js渲染中html标签不被解析的问题
Dec 14 #Javascript
关于BootStrap modal 在IOS9中不能弹出的解决方法(IOS 9 bootstrap modal ios 9 noticework)
Dec 14 #Javascript
实例解析angularjs的filter过滤器
Dec 14 #Javascript
微信小程序 input输入框控件详解及实例(多种示例)
Dec 14 #Javascript
javascript中对象的定义、使用以及对象和原型链操作小结
Dec 14 #Javascript
You might like
PHP的SQL注入实现(测试代码安全不错)
2011/02/27 PHP
php中引用&amp;的用法分析【变量引用,函数引用,对象引用】
2016/12/12 PHP
实例讲解PHP表单
2020/06/10 PHP
网页中实现浏览器的最大,最小化和关闭按钮
2007/03/12 Javascript
Jquery 模拟用户点击超链接或者按钮的方法
2013/10/25 Javascript
Jquery通过Ajax方式来提交Form表单的具体实现
2013/11/07 Javascript
jqgrid 表格数据导出实例
2013/11/21 Javascript
JavaScript验证图片类型(扩展名)的函数分享
2014/05/05 Javascript
JavaScript的this关键字的理解
2016/06/18 Javascript
jQuery+ajax的资源回收处理机制分析
2017/01/07 Javascript
浅谈angular2的http请求返回结果的subcribe注意事项
2017/03/01 Javascript
Vue中的基础过渡动画及实现原理解析
2018/12/04 Javascript
微信小程序自定义多列选择器使用详解
2019/06/21 Javascript
layui form表单提交之后重新加载数据表格的方法
2019/09/11 Javascript
layui的layedit富文本赋值方法
2019/09/18 Javascript
关于angular 8.1使用过程中的一些记录
2020/11/25 Javascript
Python遍历目录的4种方法实例介绍
2015/04/13 Python
Python 两个列表的差集、并集和交集实现代码
2016/09/21 Python
python实现识别手写数字 python图像识别算法
2020/03/23 Python
解决PyCharm不运行脚本,而是运行单元测试的问题
2019/01/17 Python
Python函数中不定长参数的写法
2019/02/13 Python
对Python 简单串口收发GUI界面的实例详解
2019/06/12 Python
python3 mmh3安装及使用方法
2019/10/09 Python
Python grequests模块使用场景及代码实例
2020/08/10 Python
如何用 Python 处理不平衡数据集
2021/01/04 Python
美国知名奢侈美容品牌零售商:Cos Bar
2017/04/21 全球购物
美国优质宠物用品购买网站:Muttropolis
2020/02/17 全球购物
电大毕业自我鉴定
2014/02/03 职场文书
五一口号
2014/06/19 职场文书
暑假学习心得体会
2014/09/02 职场文书
无刑事犯罪记录证明范本
2014/09/29 职场文书
优秀教研组申报材料
2014/12/26 职场文书
大学生逃课检讨书
2015/05/04 职场文书
红色经典电影观后感
2015/06/18 职场文书
Golang 链表的学习和使用
2022/04/19 Golang
win sever 2022如何占用操作主机角色
2022/06/25 Servers