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


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 相关文章推荐
优化网页之快速的呈现我们的网页
Jun 29 Javascript
javascript 尚未实现错误解决办法
Nov 27 Javascript
JavaScript 验证浏览器是否支持javascript的方法小结
May 17 Javascript
javascript Array.prototype.slice使用说明
Oct 11 Javascript
js arguments,jcallee caller用法总结
Nov 30 Javascript
jQuery实现鼠标悬停背景翻转的黑色导航菜单代码
Sep 14 Javascript
JQuery ztree带筛选、异步加载实例讲解
Feb 25 Javascript
javascript自执行函数
Feb 10 Javascript
vue-cli配置环境变量的方法
Jul 09 Javascript
JavaScript类的继承操作实例总结
Dec 20 Javascript
JavaScript深入V8引擎以及编写优化代码的5个技巧
Jun 24 Javascript
Vue实现点击当前行变色
Dec 14 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
apache rewrite_module模块使用教程
2008/01/10 PHP
php smarty模版引擎中的缓存应用
2009/12/11 PHP
php Smarty初体验二 获取配置信息
2011/08/08 PHP
php的webservice的wsdl的XML无法显示问题的解决方法
2014/03/11 PHP
PHP中使用glob函数实现一句话删除某个目录下的所有文件
2014/07/22 PHP
PHP入门教程之图像处理技巧分析
2016/09/11 PHP
PHP Header失效的原因分析及解决方法
2016/11/16 PHP
php微信扫码支付 php公众号支付
2019/03/24 PHP
解决laravel session失效的问题
2019/10/14 PHP
TP5框架model常见操作示例小结【增删改查、聚合、时间戳、软删除等】
2020/04/05 PHP
30个精美的jQuery幻灯片效果插件和教程
2011/08/23 Javascript
iframe的父子窗口之间的对象相互调用基本用法
2013/09/03 Javascript
jQuery实现图片渐入渐出切换展示效果
2015/08/15 Javascript
jQuery实现文本框邮箱输入自动补全效果
2015/11/17 Javascript
JavaScript实现复制或剪切内容到剪贴板功能的方法
2016/05/23 Javascript
实例详解jQuery的无new构建
2016/08/02 Javascript
xcode中获取js文件的路径方法(推荐)
2016/11/05 Javascript
微信小程序 轮播图swiper详解及实例(源码下载)
2017/01/11 Javascript
AngularJS执行流程详解
2017/02/17 Javascript
jQuery实现一个简单的轮播图
2017/02/19 Javascript
JavaScript仿微信打飞机游戏
2020/07/05 Javascript
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
2017/09/20 jQuery
Vue实现根据hash高亮选项卡
2019/05/27 Javascript
JavaScript使用百度ECharts插件绘制饼图操作示例
2019/11/26 Javascript
如何用Python合并lmdb文件
2018/07/02 Python
使用Python实现图像标记点的坐标输出功能
2019/08/14 Python
Python requests模块基础使用方法实例及高级应用(自动登陆,抓取网页源码)实例详解
2020/02/14 Python
Python使用plt.boxplot() 参数绘制箱线图
2020/06/04 Python
Python基于network模块制作电影人物关系图
2020/06/19 Python
加拿大领先的优质厨具产品在线购物网站:Golda’s Kitchen
2017/11/17 全球购物
公司节能减排方案
2014/05/16 职场文书
幼儿园标语大全
2014/06/19 职场文书
我爱幼儿园演讲稿
2014/09/11 职场文书
党员公开承诺书2015
2015/01/21 职场文书
pytorch常用数据类型所占字节数对照表一览
2021/05/17 Python
Nginx静态压缩和代码压缩提高访问速度详解
2022/05/30 Servers