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

发布时间 - 2026-01-10 21:48:55    点击率:

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

第一种:说明一下我用的是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实现标签支持图文排列带上下箭头按钮的选项卡  # 简单的实现点击箭头图片切换的js代码  # 的是  # 我用  # 种方法  # 要去  # 自带  # 这两种  # 第一种  # 官网  # 来用  # 我所知道  # click  # function  # item  # hidden  # bootstrap  # ev  # html  # xhtml  # li  # children 


相关栏目: 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571


相关推荐: 百度浏览器网页无法复制文字怎么办 百度浏览器复制修复  java中使用zxing批量生成二维码立牌  Laravel怎么实现搜索高亮功能_Laravel结合Scout与Algolia全文检索【实战】  桂林网站制作公司有哪些,桂林马拉松怎么报名?  Laravel如何集成第三方登录_Laravel Socialite实现微信QQ微博登录  Laravel如何设置定时任务(Cron Job)_Laravel调度器与任务计划配置  Laravel Pest测试框架怎么用_从PHPUnit转向Pest的Laravel测试教程  Laravel Vite是做什么的_Laravel前端资源打包工具Vite配置与使用  详解Nginx + Tomcat 反向代理 负载均衡 集群 部署指南  东莞市网站制作公司有哪些,东莞找工作用什么网站好?  Laravel如何实现API版本控制_Laravel API版本化路由设计策略  Laravel的契約(Contracts)是什么_深入理解Laravel Contracts与依赖倒置  西安市网站制作公司,哪个相亲网站比较好?西安比较好的相亲网站?  Laravel如何实现用户密码重置功能?(完整流程代码)  Laravel如何与Vue.js集成_Laravel + Vue前后端分离项目搭建指南  Swift中循环语句中的转移语句 break 和 continue  如何快速生成专业多端适配建站电话?  Laravel怎么使用artisan命令缓存配置和视图  Laravel如何部署到服务器_线上部署Laravel项目的完整流程与步骤  Laravel怎么使用Blade模板引擎_Laravel模板继承与Component组件复用【手册】  Laravel如何将应用部署到生产服务器_Laravel生产环境部署流程  Laravel怎么实现观察者模式Observer_Laravel模型事件监听与解耦开发【指南】  黑客入侵网站服务器的常见手法有哪些?  标题:Vue + Vuex + JWT 身份认证的正确实践与常见误区解析  Laravel如何生成URL和重定向?(路由助手函数)  Laravel Sail是什么_基于Docker的Laravel本地开发环境Sail入门  阿里云网站搭建费用解析:服务器价格与建站成本优化指南  Laravel 419 page expired怎么解决_Laravel CSRF令牌过期处理  西安专业网站制作公司有哪些,陕西省建行官方网站?  Python企业级消息系统教程_KafkaRabbitMQ高并发应用  Laravel distinct去重查询_Laravel Eloquent去重方法  网站制作壁纸教程视频,电脑壁纸网站?  如何为不同团队 ID 动态生成多个非值班状态按钮  高性价比服务器租赁——企业级配置与24小时运维服务  Laravel如何实现数据导出到CSV文件_Laravel原生流式输出大数据量CSV【方案】  LinuxCD持续部署教程_自动发布与回滚机制  如何有效防御Web建站篡改攻击?  安克发布新款氮化镓充电宝:体积缩小 30%,支持 200W 输出  Laravel怎么实现搜索功能_Laravel使用Eloquent实现模糊查询与多条件搜索【实例】  Android滚轮选择时间控件使用详解  Python自然语言搜索引擎项目教程_倒排索引查询优化案例  laravel怎么实现图片的压缩和裁剪_laravel图片压缩与裁剪方法  网站建设要注意的标准 促进网站用户好感度!  猎豹浏览器开发者工具怎么打开 猎豹浏览器F12调试工具使用【前端必备】  如何在云主机上快速搭建多站点网站?  Win10如何卸载预装Edge扩展_Win10卸载Edge扩展教程【方法】  Laravel如何处理JSON字段的查询和更新_Laravel JSON列操作与查询技巧  制作企业网站建设方案,怎样建设一个公司网站?  如何在阿里云香港服务器快速搭建网站?  今日头条微视频如何找选题 今日头条微视频找选题技巧【指南】