需要帮助组合 class、active 和 before 选择器

Question

我正在尝试制作一个手风琴菜单（我是 HTML、CSS 和 JS 的菜鸟，你可能会说）。

我的主要目标是让“+工作”和“+社交”按钮在激活时分别变为“-工作”和“-社交”。

我尝试使用 ::before 选择器，但我无法让它工作。

当我写 .active::before {content: "- "; } 时，它会将“-”附加到我不想要的手风琴面板中的链接。

请帮忙！！

P.S 我正在尝试将其复制到一个货物网站中，无论出于何种原因，它真的很喜怒无常，所以如果有人 advice/experience 有这个，请告诉我！

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

a {
  color: rgba(0, 0, 0, 0.6);
  font-size: 1rem;
  font-weight: 400;
  font-family: "Neue Haas Grotesk", Icons;
  text-decoration: none;
}

a:visited {
  color: rgba(0, 0, 0, 0.6);
  text-decoration: none;
}

a:hover {
  color: #225a25;
  text-decoration: none;
}


/*Accordian menu buttons*/
.accordion {
  background-color: rgba(0, 0, 0, 0);
  color: rgba(0, 0, 0, 0.6);
  cursor: pointer;
  padding: 0px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 1rem;
  font-weight: 400;
  font-family: "Neue Haas Grotesk", Icons;
  text-decoration: none;
  transition: 0.2s;
}

/*Change button prefix from + to - upon clicking*/
.accordion::before {
  content: "+ ";
}

.accordian:active::before {
  content: "- ";
}
.active {
  text-decoration: underline;
}



.accordion:hover {
  color: #225a25; 
}


/*Accodian panel style*/
.panel {
  padding: 2px 16px 16px;
  display: none;
  background-color: rgba(0, 0, 0, 0);
  overflow: hidden;
}

</style>

<button class="accordion">&nbsp;Work</button>
<div class="panel" style="display: none;">
  <a href="Freelance-Work" rel="history">︎ Freelance</a><br>
  <a href="university-work" rel="history" data-tags="university-work">︎ University</a><br>
  <a href="Personal-projects" rel="history">︎ Personal</a>
</div>

<button class="accordion">&nbsp;Social</button>
<div class="panel" style="display: none;">
  <a href="https://www.linkedin.com/in/andy-connacher-2a7867a8/" target="_blank">︎ LinkedIn</a><br>
  <a href="https://www.instagram.com/andyconnach3r/" target="_blank">︎ Instagram</a><br>
  <a href="https://www.upwork.com/freelancers/~019da1b6edbddef1f1" target="_blank">︎ Upwork</a>


</div>

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

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}
</script>

</body>
</html>

Answer 1

select active class 你用的是 . 而不是 :

改变

.accordian:active::before {
  content: "- ";
}

至

.accordion.active::before {
  content: "- ";
}

需要帮助组合 class、active 和 before 选择器

Need help combining class, active and before selectors

html

javascript

css

css-selectors

drop-down-menu