如何添加:之后和:之前的图标改变点击按钮下拉?

Question

与之后和之前，我试图改变下拉图标时，它是打开或关闭。到目前为止我还没有取得任何成果，我对这一切都比较陌生，我不明白我如何才能取得成果，请问有人能帮助我吗?

实际上我甚至不知道这样做是否正确。

编辑根据AStombaugh的回答，我可以得到这个结果，但我不知道我做得对不对。谁能给我解释一下我所做的是对还是错?对不起，我是新来的，试图了解js的各个方面。

新片段

var dropdownBtn = document.querySelectorAll('.drop_btn');
iconDrop = null;
lastOpened = null; //Add this for toggling dropdown
dropdownBtn.forEach(btn => btn.addEventListener('click', function() {
var dropCont = this.nextElementSibling;
let icon = this.querySelector('.icon_item');
icon.classList.toggle("visible");
dropCont.classList.toggle("show");
//Add this for toggling dropdown
if (lastOpened && lastOpened !== dropCont)
lastOpened.classList.remove("show");
lastOpened = dropCont;
if (iconDrop && iconDrop !== icon)
iconDrop.classList.remove("visible");
iconDrop = icon;
}));

.drop_btn {
background: #e0e0e0;
padding: 10px;
margin: 5px 0px 0px 0px;
}
.icon_item:after {
font-family: fontAwesome;
content: 'f078';
float: right;
}
.icon_item.visible:after {
font-family: fontAwesome;
content: 'f00d';
}
.drop_btn:hover {
background: #000;
color: #fff;
}
.drop_container {
overflow: hidden;
max-height: 0;
transition: max-height 0.2s ease-out;
}
.drop_container.show {
max-height: 300px;
transition: max-height 0.3s ease-in;
}
.drop_container>.item {
display: flex;
flex-direction: column;
margin-left: 10px;
padding: 10px 0px 0px 0px;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
<div class="dropdown-menu">
<div class="drop_btn">One<span class="icon_item"></span></div>
<div class="drop_container">
<a class="item" href="#">Contact Us</a>
<a class="item" href="#">Visit Us</a>
</div>
<div class="drop_btn">Two<span class="icon_item"></span></div>
<div class="drop_container">
<a class="item" href="#">Contact Us</a>
<a class="item" href="#">Visit Us</a>
</div>
</div>

旧的原始片段

var dropdownBtn = document.querySelectorAll('.drop_btn');
lastOpened = null; //Add this for toggling dropdown
dropdownBtn.forEach(btn => btn.addEventListener('click', function() {
var dropCont = this.nextElementSibling;
dropCont.classList.toggle("show");

//Add this for toggling dropdown
if (lastOpened && lastOpened !== dropCont)
lastOpened.classList.remove("show");
lastOpened = dropCont;
}));

.drop_btn {
background: #e0e0e0;
padding: 10px;
margin: 5px 0px 0px 0px;
}
.drop_btn:before {
font-family: fontAwesome;
content: 'f077';
float: right;
}
.drop_btn:after {
font-family: fontAwesome;
content: 'f078';
float: right;
}
.drop_btn:hover {
background: #000;
color: #fff;
}
.drop_container {
overflow: hidden;
max-height: 0;
transition: max-height 0.2s ease-out;
}
.drop_container.show {
max-height: 300px;
transition: max-height 0.3s ease-in;
}
.drop_container > .item {
display: flex;
flex-direction: column;
margin-left: 10px;
padding: 10px 0px 0px 0px;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
<div class="dropdown-menu">
<div class="drop_btn">One</div>
<div class="drop_container">
<a class="item" href="#">Contact Us</a>
<a class="item" href="#">Visit Us</a>
</div>
<div class="drop_btn">Two</div>
<div class="drop_container">
<a class="item" href="#">Contact Us</a>
<a class="item" href="#">Visit Us</a>
</div>
</div>

Answer 1

:before和:after在这种情况下没有做你认为他们在做的事情。https://developer.mozilla.org/en-US/docs/Web/CSS/:在

然而，你实际上可以把Fontawesome图标当作类，然后像处理菜单一样切换它们。参见:https://fontawesome.bootstrapcheatsheets.com/找到你想要的图标，复制HTML标签，然后将类添加到你的CSS(一切在<i>减去fa部分)，然后操作它们，因为你会任何其他CSS元素。在需要图标的地方添加实际的HTML标签。

var dropdownBtn = document.querySelectorAll('.drop_btn');
iconDrop = null;
lastOpened = null; //Add this for toggling dropdown
dropdownBtn.forEach(btn => btn.addEventListener('click', function() {
var dropCont = this.nextElementSibling;
let icon = this.querySelector('.fa-angle-up');
icon.classList.toggle("down");
dropCont.classList.toggle("show");
//Add this for toggling dropdown
if (lastOpened && lastOpened !== dropCont)
lastOpened.classList.remove("show");
lastOpened = dropCont;
if (iconDrop && iconDrop !== icon)
iconDrop.classList.remove("down");
iconDrop = icon;
}));

.drop_btn {
background: #e0e0e0;
padding: 10px;
margin: 5px 0px 0px 0px;
}
.fa-angle-up {
display: inline-block;
position: absolute;
right: 2em;
margin: 0;
padding: 0;
transform: rotateY(0);
transform-origin: center;
transition: 0.3s linear;
}
.fa-angle-up.down {
display: inline-block;
position: absolute;
right: 2em;
margin: 0;
padding: 0;
transform: rotateZ(-180deg);
transform-origin: center;
transition: 0.3s linear;
}
.drop_btn:hover {
background: #000;
color: #fff;
}
.drop_container {
overflow: hidden;
max-height: 0;
transition: max-height 0.2s ease-out;
}
.drop_container.show {
max-height: 300px;
transition: max-height 0.3s ease-in;
}
.drop_container>.item {
display: flex;
flex-direction: column;
margin-left: 10px;
padding: 10px 0px 0px 0px;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
<div class="dropdown-menu">
<div class="drop_btn">One<i class="fa fa-angle-up"></i></div>
<div class="drop_container">
<a class="item" href="#">Contact Us</a>
<a class="item" href="#">Visit Us</a>
</div>
<div class="drop_btn">Two<i class="fa fa-angle-up"></i></div>
<div class="drop_container">
<a class="item" href="#">Contact Us</a>
<a class="item" href="#">Visit Us</a>
</div>
</div>