Question

如果我在i标签中使用 fa-folder 并在javascript中使用 fa-folder-open ，则下面的简单代码有效，但如果我替换 fa -caret-right 和 fa-caret-down ，它不起作用，我看不出原因。任何帮助将不胜感激。谢谢！

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

Answer 1

当你打开下课时，你需要关闭正确的课程。此外，我摆脱了不间断的空间，并使用CSS来呈现相同的结果 - 化妆品，但不那么烦人。

＆＃13;

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");
  }
}

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

这是因为你拼错了。它是插入符号而不是克拉。

如何使字体 - 令人敬畏的插入符号从插入符号权限更改为插入符号？

2 个答案: