码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2016-11-02 17:53:53      阅读:566      评论:0      收藏:0      [点我收藏+]

标签:color   cti   this   mil   value   awesome   nbsp   weight   代码   

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

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

 

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

标签:color   cti   this   mil   value   awesome   nbsp   weight   代码   

原文地址:http://www.cnblogs.com/lwwen/p/6023413.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!