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

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

第一种:说明一下我用的是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的字体哈

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

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索切换
箭头
jquery左右箭头切换、jquery上下箭头切换、jquery 点击箭头旋转、点击左右箭头切换图片、点击左右箭头滑动切换,以便于您获取更多的相关知识。

时间: 2024-10-25 04:20:29

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

js前端实现多图图片上传预览的两个方法(推荐)_javascript技巧

一.将图片转成icon码的实现方式 html代码: <div class="yanzRight"> <input style="margin-top:5px;float: left;" id="st18" name="evidence" onchange="previewImage(this,5)" type="file"/> <span class=&qu

[ASP.NET] 限制上传文件类型的两种方法

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 通常,为了防止因用户上传有害文件(如木马.黑客程序)引发的安全性问题,Web程序都会对用户允许上传的文件类型加以限制.而本文将要介绍的就是如何在ASP.NET应用程序中利用Web Control的内置属性简单高效地实现限制上传文件类型的功能. 在调用PostFile对象的SaveAs方法保存上传文件之前,可以通过PostFile对象的File

解决Win7下安装VS2010不显示序列号框的两种方法

VS2010在Windows 7下安装,一些朋友发现怎么在安装的时候输入序列号框怎么不出现呢?这该如何解决?下面西部e网的icech就找到了两种解决方法帮您解决这个问题: 1.修改setup.sdb文件的方法 这是一个老办法了,setup.sdb文件是从ISO文件中提取出来的setup文件进行编辑,只需要修改里面的[Product Key]项,在安装的时候就不用输入序列号了. 这里icech提供的是: [Product Key] YCFHQ9DWCYDKV88T2TMHG7BHP 也可以根据你的

遮罩层点击按钮弹出并且具有拖动和关闭效果(两种方法)_jquery

首先给大家展示演示效果: 基于JavaScript的网页弹出层,鼠标按在弹出层的标题栏处,可以拖动该浮动层随意移动位置,不需要时也可以关闭,操作体验舒服,兼容性好,IE/火狐等众多浏览器下运行稳定.反应快速.代码表现方面,简洁务实,不玩虚的,拿去学习也相当不错. js代码 示例一: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>弹出层并可

CB下实现对端口读写的两种方法

在C++Builder中,不能够使用Turbo C中的outputb和inputb端口读写函数.但我们可以有另外两种办法实现这个功能.本文介绍怎样在C++Builder下实现端口读写,并给出两种方法的源代码. 在C++Builder下对端口的读写共有两种方法,一种为内嵌汇编语言,另一种为使用__emit__函数. 1 通过内嵌汇编语言实现端口的读写 在C++Builder中,汇编语句必须被包含在以关键字asm为起始的一对大括号中: asm {汇编语句1--} 利用内嵌汇编语言编制端口输出函数如下

xml-关于安卓设置按钮回退到上一个activity的问题 ,问下大神两种方法的不同。

问题描述 关于安卓设置按钮回退到上一个activity的问题 ,问下大神两种方法的不同. 1.第一种是常规的添加按钮监听,使用finish回退到上一个activit运行成功. 2.查资料后,还有一种解决方式为在xml文件按钮中设置android:onClick=""back"",然后在调用当前xml文件的activity中编写back()方法包含finish()结束当前的activity,自己编写的代码不报错,但是回退到上一个界面是会弹出无法运行界面,然后回退到上一

JavaBean实现多文件上传的两种方法

上传 摘要:本文介绍了JavaBean实现多个文件上传的两种方法,分别是使用http协议和ftp协议实现.首先讲述了http协议传送多个文件的基本格式和实现上传的详细过程,之后简单介绍了使用ftpclient 类实现了ftp方式的上传,最后对这两种方法进行了比较. 关键字:JavaBean .http .ftp .ftpclient JavaBean是一种基于Java的软件组件.JSP对于在Web 应用中集成JavaBean组件提供了完善的支持.这种支持不仅能缩短开发时间(可以直接利用经测试和可

Photoshop两种方法给美女的眼睛变大

  本教程主要使用Photoshop两种方法给美女的眼睛变大,眼睛变大是人物图片美化中经常用到的.方法有很多,下面介绍两种最基础的方法.一种是用变形工具强行拉大;一种是用液化滤镜中的膨胀工具变大.两种方法都比较快. 最终效果 一.变换比列放大法 1.我们打开图片,选中椭圆选框工具,选中脸部分.执行选择-修改-羽化-5px(Shift+F6). 2.Ctrl+J复制出眼睛部分,得到眼睛图层,因为是羽化的所以边缘融合效果好点. 3.我们按着 ctrl+T 编辑- 自由变换.勾选锁链按钮,放大合适的大

win7系统下浏览器主页被金山毒霸导航劫持的两种解决方法

  一般情况下,win7操作系统自带有IE浏览器,用户可直接打开浏览器观看视频或搜索网页内容等等.有的时候会发生浏览器主页被劫持的现象,一位用户说win7 32位系统明明打开浏览器主页却变成毒霸导航的网址,为什么会出现这样的情况呢?主要原因就是你安装了金山毒霸,而毒霸的"新保护功能"把你的主页劫持了.接下去,本教程小编介绍两种解决方法,大家可以往下学习. 解决方法: 方法一.卸载金山毒霸,这个不用教了吧. 方法二. 1.在毒霸设置页面,安全保护设置-上网保护; 2.点击上网保护,取消安