代码改变世界

点击下箭头⤵️变上箭头⬆️来回切换的两种方法

  改吧  阅读(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: '\f107';
}
复制代码

js代码就是

$('.nav-item>a').click(function(){
$(this).children('.arrow').toggleClass('open')
})

第二种方法主要就是通过添加一个class来覆盖之前的那个content,同样是fonawesome的字体哈

 

编辑推荐:
· 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)
· 程序员常用高效实用工具推荐,办公效率提升利器!
点击右上角即可分享
微信分享提示