Как сделать шрифт с потрясающим изменением каретки с кареткой справа на каретку?

Простой код ниже работает, если я использую фа-папку в я теге и фа-папка открытой в JavaScript, но если я заменяю фа-каретка правый и фа-каре-вниз , это не работает, и я не понимаю, почему. Любая помощь будет принята с благодарностью. Благодаря!Как сделать шрифт с потрясающим изменением каретки с кареткой справа на каретку?

<html> 
<head> 
<style> 
    .accordion { 
    cursor: pointer; 
    } 
    .panel { 
    display: none; 
    } 
    .panel.show { 
    display: block; 
    margin-left: 20px; 
    } 
</style> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css"> 
</head> 
<body> 
    <p class="accordion"><i class="fa fa-folder" aria-hidden="true"></i>&nbsp;&nbsp;Building Guides</p> 
    <div class="panel"> 
    <p><i class="fa fa-file-pdf-o" aria-hidden="true"></i>&nbsp;&nbsp;Accessory Structures Building Guide 2012</p> 
    <p><i class="fa fa-file-pdf-o" aria-hidden="true"></i>&nbsp;&nbsp;Basement Finish Building Guide 2012</p> 
    <p><i class="fa fa-file-pdf-o" aria-hidden="true"></i>&nbsp;&nbsp;Decks Building Guide 2012</p> 
    </div> 
<script> 
var acc = document.getElementsByClassName("accordion"); 
var i; 

for (i = 0; i < acc.length; i++) { 
acc[i].onclick = function(){ 
    this.nextElementSibling.classList.toggle("show"); 
    this.firstChild.classList.toggle("fa-folder-open"); 
    } 
} 
</script> 
</body> 
</html>

источник

2017-02-06 Michael

Вам необходимо отключить класс, если вы включите класс вниз. Кроме того, я избавился от неразрывных пробелов и использовал CSS для отображения того же результата - косметического, но менее раздражающего.

var acc = document.getElementsByClassName("accordion"); 
 
var i; 
 

 
for (i = 0; i < acc.length; i++) { 
 
    acc[i].onclick = function() { 
 
    this.nextElementSibling.classList.toggle("show"); 
 
    this.firstChild.classList.toggle("fa-caret-right") 
 
    this.firstChild.classList.toggle("fa-caret-down"); 
 
    } 
 
}

.fa { 
 
    width: 20px; 
 
} 
 

 
.accordion { 
 
    cursor: pointer; 
 
} 
 
.panel { 
 
    display: none; 
 
} 
 
.panel.show { 
 
    display: block; 
 
    margin-left: 20px; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" /> 
 
<p class="accordion"><i class="fa fa-caret-right" aria-hidden="true"></i>Building Guides</p> 
 
<div class="panel"> 
 
    <p><i class="fa fa-file-pdf-o" aria-hidden="true"></i>Accessory Structures Building Guide 2012</p> 
 
    <p><i class="fa fa-file-pdf-o" aria-hidden="true"></i>Basement Finish Building Guide 2012</p> 
 
    <p><i class="fa fa-file-pdf-o" aria-hidden="true"></i>Decks Building Guide 2012</p>

источник

2017-02-06 20:13:36 Snowmonkey

Большое вам спасибо! Кстати, почему бы не иметь значения, если бы я использовал значок папки, но имел значение при использовании значка каретки? – Michael

Вглядываясь в это. Кажется, они обрабатывают вычисленные атрибуты по-разному - используют инструменты dev и проверяют элементы. Кажется, это вопрос того, какое правило будет применено. Не совсем уверен, как приоритет работает в этом конкретном случае. – Snowmonkey

это потому, что в папке, значок открытой папки появляется позже в таблице стилей CSS, чем значок закрытой папки. Поэтому его стили имеют приоритет, когда он включен. Но обратное верно для кареток, поэтому правильная позиция имеет приоритет над нисходящим, даже если вы включаете оба класса. – andi

Это потому, что вы неправильно написали. It's уход не карат.

источник

2017-02-06 20:13:02 andi

И да, это тоже. – Snowmonkey

Прошу прощения, я имел в виду карету, даже каретка не работает ... – Michael

Как сделать шрифт с потрясающим изменением каретки с кареткой справа на каретку?

ответ

Смежные вопросы