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


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 相关文章推荐
浅谈js和css内联外联注意事项
Jun 30 Javascript
JS给swf传参数的实现方法
Sep 13 Javascript
vue.js学习之递归组件
Dec 13 Javascript
详谈js中window.location.search的用法和作用
Feb 13 Javascript
JS中showModalDialog关闭子窗口刷新主窗口用法详解
Mar 25 Javascript
jquery获取链接地址和跳转详解(推荐)
Aug 15 jQuery
jQuery序列化form表单数据为JSON对象的实现方法
Sep 20 jQuery
React 使用Hooks简化受控组件的状态绑定
Mar 18 Javascript
p5.js实现简单货车运动动画
Oct 23 Javascript
Vue 使用typescript如何优雅的调用swagger API
Sep 01 Javascript
基于elementUI竖向表格、和并列的案例
Oct 26 Javascript
Vue+Flask实现图片传输功能
Apr 01 Vue.js
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
从康盛产品(discuz)提取出来的模板类
2011/06/28 PHP
遍历指定目录,并存储目录内所有文件属性信息的php代码
2016/10/28 PHP
php图形jpgraph操作实例分析
2017/02/22 PHP
PHP设计模式之模板方法模式定义与用法详解
2018/04/02 PHP
用于自动添加Digg This!按钮的JavaScript
2006/12/23 Javascript
斜45度寻路实现函数
2009/08/20 Javascript
$(&quot;&quot;).click与onclick的区别示例介绍
2014/09/25 Javascript
JavaScript中原型和原型链详解
2015/02/11 Javascript
js实现当前输入框高亮显示的方法
2015/08/19 Javascript
jQuery EasyUI Tab 选项卡问题小结
2016/08/16 Javascript
详解Angularjs 如何自定义Img的ng-load 事件
2017/02/15 Javascript
vue2.0结合Element实现select动态控制input禁用实例
2017/05/12 Javascript
解决JQuery全选/反选第二次失效的问题
2017/10/11 jQuery
jQuery结合jQuery.cookie.js插件实现换肤功能示例
2017/10/14 jQuery
vue 中filter的多种用法
2018/04/26 Javascript
Python中Continue语句的用法的举例详解
2015/05/14 Python
Django 2.0版本的新特性抢先看!
2018/01/05 Python
python实现聚类算法原理
2018/02/12 Python
基于Python2、Python3中reload()的不同用法介绍
2019/08/12 Python
Python类如何定义私有变量
2020/02/03 Python
Python实现猜年龄游戏代码实例
2020/03/25 Python
Python with语句用法原理详解
2020/07/03 Python
PyTorch 中的傅里叶卷积实现示例
2020/12/11 Python
HTML5的结构和语义(4):语义性的内联元素
2008/10/17 HTML / CSS
魅力惠奢品线上平台:MEI.COM
2016/11/29 全球购物
土耳其时尚购物网站:Morhipo
2017/09/04 全球购物
香港演唱会订票网站:StubHub香港
2019/10/10 全球购物
自然健康的概念:Natural Healthy Concepts
2020/01/26 全球购物
Belvilla法国:休闲度假房屋出租
2020/10/03 全球购物
简述索引存取方法的作用和建立索引的原则
2013/03/26 面试题
机电一体化自荐信
2013/12/10 职场文书
三分钟英语演讲稿
2014/04/24 职场文书
市场推广策划方案
2014/06/02 职场文书
师德师风事迹材料
2014/12/20 职场文书
2015年幼儿园个人工作总结
2015/04/25 职场文书
AJAX引擎原理以及XmlHttpRequest对象的axios、fetch区别详解
2022/04/09 Javascript