点击下箭头⤵️变上箭头⬆️来回切换的两种方法
2016-11-02 16:33 改吧 阅读(2640) 评论(1) 编辑 收藏 举报我所知道的常用的就这两种。
第一种:说明一下我用的是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:
}
js代码就是
$('.nav-item>a').click(function(){ $(this).children('.arrow').toggleClass('open') })
第二种方法主要就是通过添加一个class来覆盖之前的那个content,同样是fonawesome的字体哈
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 现代计算机视觉入门之:什么是图片特征编码
· 手把手教你在本地部署DeepSeek R1,搭建web-ui ,建议收藏!
· Spring AI + Ollama 实现 deepseek-r1 的API服务和调用
· 数据库服务器 SQL Server 版本升级公告
· C#/.NET/.NET Core技术前沿周刊 | 第 23 期(2025年1.20-1.26)
· 程序员常用高效实用工具推荐,办公效率提升利器!