如何添加:after和:before在單擊按鈕下拉選單中更改的圖示？

之后和之前我試圖在打開或關閉時更改下拉圖示。到目前為止我還沒有取得任何結果，我對這一切都比較陌生，我不明白我如何才能取得結果，有人可以幫助我嗎？

實際上，我什至不知道這是否是正確的方法。

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>

uj5u.com熱心網友回復：

:before在這種情況下，并:after沒有做你認為他們正在做的事情。https://developer.mozilla.org/en-US/docs/Web/CSS/::before

但是，您實際上可以將 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>

標籤：javascript html css 图标 落下

上一篇：React，如何在div中使用if條件來更改其類名？

下一篇：Vuejsimagev-bindsrc在使用axios從API呼叫接收動態值時由于路徑不正確而無法作業