font-awesome arrow 서브 메뉴 변경

Question

서브 메뉴에서 font-awesome을 fa-angle-down으로 변경하고 하위 메뉴 collapsed에서 fa-angle-left을 되돌리고 싶습니다.

HTML과 CSS :

.sidenav li .arrow:before { 
 
    font-size: 1.4em; 
 
    padding-left: 10px; 
 
    padding-right: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 

 
<li data-toggle="collapse" data-target="#SubMenuTools" class="collapsed"> 
 
    <a href="#/"><i class="fa fa-tasks fa-fw"></i> External Tools <span class="arrow pull-right fa fa-angle-left"></span></a> 
 
</li> 
 
<ul class="sub-menu collapse" id="SubMenuTools"> 
 
    <li><a href="">First tool</a></li> 
 
    <li><a href="">Second Tool</a></li> 
 
</ul>

방법? CSS 또는 jQuery에 있어야합니까?

Answer 1

transform을 transition과 쌍으로 사용할 수 있습니다. 이렇게하면 JS를 사용하여 .fa-angle-left을 .fa-angle-down으로 간단히 바꾸는 것보다 더 좋은 효과를 얻을 수 있습니다. jQuery로 http://codepen.io/ptrkcsk/pen/PbGbXW

Answer 2

:

$('a').on('click', function() { 
 
    var expanded = $('#SubMenuTools').hasClass("in"); 
 
    if (expanded == true) { 
 
    $('#arrow').removeClass("fa-angle-down"); 
 
    $('#arrow').addClass("fa-angle-left"); 
 
    } 
 
    else { 
 
    $('#arrow').removeClass("fa-angle-left"); 
 
    $('#arrow').addClass("fa-angle-down"); 
 
    } 
 
});

.sidenav li .arrow:before { 
 
    font-size: 1.4em; 
 
    padding-left: 10px; 
 
    padding-right: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 

 
<li data-toggle="collapse" data-target="#SubMenuTools" class="collapsed"> 
 
    <a href="#/"> 
 
    <i class="fa fa-tasks fa-fw"></i> 
 
    <span>External Tools</span> 
 
    <i class="fa fa-angle-left" id='arrow'></i> 
 
    </a> 
 
</li> 
 
<ul class="sub-menu collapse" id="SubMenuTools"> 
 
    <li><a href="">First tool</a> 
 
    </li> 
 
    <li><a href="">Second Tool</a> 
 
    </li> 
 
</ul>

Answer 3

당신은 JQuery와 예제를 사용할 수 있습니다

.sidenav li .arrow { 
    transition: transform .25s; 
} 

.sidenav li.collapsed .arrow { 
    transform: rotate(90deg); 
} 

이 펜에서보세요.

$(document).ready(function() { 
    var expand = false; 
    $("#mainMenu").click(function() { 
    expand = !expand; 
    if (expand) { 
     $(this).children("span").removeClass().addClass("fa fa-angle-down"); 
    } else { 
     $(this).children("span").removeClass().addClass(" fa fa-angle-left"); 
    } 
    }); 
}); 

DEMO HERE