文章/答案/技术大牛

发布

社区首页 >问答首页 >需要帮助组合类、活动和选择器之前的

问需要帮助组合类、活动和选择器之前的
EN

Stack Overflow用户

提问于 2021-12-18 00:29:35

回答 1查看 25关注 0票数 0

我正在尝试制作手风琴菜单(你可能知道，我是HTML、CSS和JS方面的一个大菜鸟)。

我的主要目标是使"+ Work“和"+ Social”按钮在活动时分别更改为"- Work“和"- Social”。

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

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

救命啊！！

我正试着把这个复制到一个货物网站上，不管出于什么原因，这是非常喜怒无常的，所以如果有人有这方面的建议/经验，请告诉我！

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

css

drop-down-menu

css-selectors

javascript

html

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-12-18 00:46:33

若要选择active类，请使用.而不是:

变化

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

至

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/70400133

复制

相似问题

问需要帮助组合类、活动和选择器之前的
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问需要帮助组合类、活动和选择器之前的EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问需要帮助组合类、活动和选择器之前的
EN