Изменить шрифт-awesome arrow submenu

Question

Я хотел бы изменить шрифт-awesome на fa-angle-down в открывшемся подменю и положить обратно 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.

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

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

Посмотрите на эту ручку: http://codepen.io/ptrkcsk/pen/PbGbXW

Answer 2

с JQuery:

$('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.

$(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