如何添加 :after 和 :before 图标在单击按钮下拉菜单时发生变化？

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/::before

但是，您实际上可以将 Fontawesome 图标视为 classes，然后像处理菜单一样切换它们。请参阅：https://fontawesome.bootstrapcheatsheets.com/ 找到您想要的图标，复制 HTML 标签，然后将 class 添加到您的 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>

如何添加 :after 和 :before 图标在单击按钮下拉菜单时发生变化？

How to add :after and :before icon that change on click button dropdown?

html

javascript

css

icons

dropdown