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

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

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

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

赞 (0)

相关推荐

  • jquery实现标签支持图文排列带上下箭头按钮的选项卡

    带上下箭头jquery垂直tab选项卡切换标签,技持左侧列表上下滚动,滚动到底部带信息提示. 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml

  • 简单的实现点击箭头图片切换的js代码

    简单的实现点击箭头图片切换的js代码

    步骤如下: (1) 准备图片(左右箭头,以及一些示例图片) (2) JS(jquery)的代码如下: 复制代码 代码如下: <script type="text/javascript" src="JS/jquery-1.4.4.js"></script> <script type="text/javascript"> var picPath = new Array(); picPath.push("I

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

    我所知道的常用的就这两种. 第一种:说明一下我用的是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是显示的,然后上箭头an

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

    一.将图片转成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

  • CentOS 7下修改默认网卡名为eth0的两种方法

    CentOS 7下修改默认网卡名为eth0的两种方法

    前言 大家都知道CentOS7默认的网卡名称是和设备名称是随机的,如果要修改网卡名称以 eth 开头,有两种方式,如下: 第一种方式 这种方式适合在安装操作系统的时候进行设置, 点击 Tab,打开kernel启动选项, 增加内核参数: net.ifnames=0   biosdevname=0 输入完成之后回车正常安装操作系统就好了. 第二种方式 修改网卡配置文件中的 DEVICE= 参数的关于 eth0 [root@ansheng ~]# cd /etc/sysconfig/network-s

  • iOS实现图片压缩的两种方法及图片压缩上传功能

    两种压缩图片的方法:压缩图片质量(Quality),压缩图片尺寸(Size). 压缩图片质量 NSData *data = UIImageJPEGRepresentation(image, compression); UIImage *resultImage = [UIImage imageWithData:data]; 通过 UIImage 和 NSData 的相互转化,减小 JPEG 图片的质量来压缩图片.UIImageJPEGRepresentation:: 第二个参数 compressi

  • android中在Activity中响应ListView内部按钮的点击事件的两种方法

    最近交流群里面有人问到一个问题:如何在Activity中响应ListView内部按钮的点击事件,不要在Adapter中响应? 对于这个问题,我最初给他的解答是,在Adapter中定义一个回调接口,在Activity中实现该接口,从而实现对点击事件的响应. 下班后思考了一下,觉得有两种方式都能比较好的实现:使用接口回调和使用抽象类回调. 正好可以复习一下接口和抽象类的区别,于是写了两个Demo: 1.使用接口回调: Adapter类 package com.ivan.adapter; import

  • 关于火狐(firefox)及ie下event获取的两种方法

    经常有同事问我在火狐浏览器怎么获取event的方法,大多是想获取event.keyCode的功能两种方法 第一种方法: 复制代码 代码如下: function a(e){ e=e||window.event; alert(e.keyCode); } ie浏览器如下调用 复制代码 代码如下: <body onclick="a()"> firefox火狐浏览器如下调用 复制代码 代码如下: <body onclick="a(event)"> 这样

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

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

  • linux下查看已经安装的jdk 并卸载jdk的方法(推荐)

    一.查看Jdk的安装路径: whereis java which java (java执行路径) echo $JAVA_HOME echo $PATH 备注:如果是windows中,可以使用: set java_home:查看JDK安装路径 java -version:查看JDK版本 二.卸载旧版本的JDK: 1. 确定JDK的版本: rpm -qa | grep jdk rpm -qa | grep gcj 可能的结果是: libgcj-4.1.2-42.el5 java-1.4.2-gcj-

  • 详解vue.js下引入百度地图jsApi的两种方法

    前言 今天有个项目需要用到百度地图,一般我们在移动端使用百度地图,都是直接通过这样的方式,直接引入百度地图的jsApi. <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=D9b45bc6f98deafc489e9ac1bc7f7612"></script> 这种方法的原理,就是直接给全局widow对象添加一个BMap对象,从而可以使我们

  • angular中实现li或者某个元素点击变色的两种方法

    本文介绍了angular中实现li或者某个元素点击变色的两种方法,分享给大家,希望对大家有帮助 先说一种最直接了当的不需要js控制. 方法一:直接在用ng-class就可以控制: <p ng-click="state=1;" ng-class="{active:state==1}">浮伤年华</p> <p ng-click="state=2;" ng-class="{active:state==2}&quo

随机推荐