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


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 相关文章推荐
XMLHTTP 乱码的解决方法(UTF8,GB2312 编码 解码)
Jan 12 Javascript
css transform 3D幻灯片特效实现步骤解读
Mar 27 Javascript
Backbone.js的Hello World程序实例
Jun 19 Javascript
实用jquery操作表单元素的简单代码
Jul 04 Javascript
EasyUI加载完Html内容样式渲染完成后显示
Jul 25 Javascript
常用js,css文件统一加载方法(推荐) 并在加载之后调用回调函数
Sep 23 Javascript
使用bootstrap-paginator.js 分页来进行ajax 异步分页请求示例
Mar 09 Javascript
JS实现含有中文字符串的友好截取功能分析
Mar 13 Javascript
Vue实现双向数据绑定
May 03 Javascript
浅谈vue实现数据监听的函数 Object.defineProperty
Jun 08 Javascript
js实现简单数字变动效果
Nov 06 Javascript
Vue分页器实现原理详解
Jun 28 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+jQuery 注册模块的改进(三):更新到Smarty3.1
2014/10/14 PHP
PHP检测字符串是否为UTF8编码的常用方法
2014/11/21 PHP
如何通过Linux命令行使用和运行PHP脚本
2015/07/29 PHP
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
2010/03/12 Javascript
Javascript(AJAX)解析XML的代码(兼容FIREFOX/IE)
2010/07/11 Javascript
手把手教你自己写一个js表单验证框架的方法
2010/09/14 Javascript
JavaScript+CSS控制打印格式示例介绍
2014/01/07 Javascript
node.js中的http.response.getHeader方法使用说明
2014/12/14 Javascript
JS实现文字链接感应鼠标淡入淡出改变颜色的方法
2015/02/26 Javascript
javascript实现Table间隔色以及选择高亮(和动态切换数据)的方法
2015/05/14 Javascript
jQuery实现自动滚动到页面顶端的方法
2015/05/22 Javascript
js 动态生成json对象、时时更新json对象的方法
2016/12/02 Javascript
Angular自定义组件实现数据双向数据绑定的实例
2017/12/11 Javascript
VUE 实现滚动监听 导航栏置顶的方法
2018/09/11 Javascript
对vue v-if v-else-if v-else 的简单使用详解
2018/09/29 Javascript
使用taro开发微信小程序遇到的坑总结
2019/04/08 Javascript
JS实现滚动条触底加载更多
2019/09/19 Javascript
vue 中的 render 函数作用详解
2020/02/28 Javascript
python3音乐播放器简单实现代码
2020/04/20 Python
python中不能连接超时的问题及解决方法
2018/06/10 Python
Django实现分页功能
2018/07/02 Python
python重要函数eval多种用法解析
2020/01/14 Python
python mysql 字段与关键字冲突的解决方式
2020/03/02 Python
pyMySQL SQL语句传参问题,单个参数或多个参数说明
2020/06/06 Python
python爬虫看看虎牙女主播中谁最“顶”步骤详解
2020/12/01 Python
python连接手机自动搜集蚂蚁森林能量的实现代码
2021/02/24 Python
大专自我鉴定范文
2013/10/23 职场文书
清正廉洁演讲稿
2014/05/22 职场文书
试用期转正员工自我评价
2014/09/18 职场文书
无刑事犯罪记录证明范本
2014/09/29 职场文书
党的群众路线教育实践活动个人整改方案
2014/10/25 职场文书
先进典型发言材料
2014/12/30 职场文书
幼儿园教师自荐书
2015/03/06 职场文书
试用期自我评价范文
2015/03/10 职场文书
英语教师求职信范文
2015/03/20 职场文书
团拜会主持词
2015/07/04 职场文书