在javascript中顯示文本后更改顏色-有解無憂

我想用我的代碼達到一些特定的結果，但我找不到我做錯了什么。如果您能糾正我，那將非常有幫助。

所以我制作了這些行，您可以單擊并打開它們。橙色行打開，標題變為藍色。我想要藍色行的相反的東西。我的意思是我希望該行打開并且標題變為橙色。

提前致謝。這是我第一次發帖：）

這是我的代碼

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.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight   "px";
    }
  });
}

var acc = document.getElementsByClassName("accordion2");
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.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight   "px";
    }
  });
}

.accordion {
  font-family: default;
  cursor: pointer;
  background-color: #F7A600;
  color: #ffffff;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 26px;
  transition: 0.4s;
  font-family: 'Ubuntu';
}

.active,
.accordion:hover {
  background-color: #ffffff;
  color: #F7A600;
}

.accordion:after {
  content: '\23F7';
  font-weight: bold;
  float: float;
  margin-left: 15px;
}

.active:after,
.accordion {
  content: "\23F6";
}

.accordion2 {
  font-family: default;
  cursor: pointer;
  background-color: #009ACB;
  color: #ffffff;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 26px;
  transition: 0.4s;
  font-family: 'Ubuntu';
}

.active,
.accordion2:hover {
  background-color: #ffffff;
  color: #009ACB;
}

.accordion2:after {
  content: '\23F7';
  font-weight: bold;
  float: float;
  margin-left: 5px;
}

.active:after,
.accordion2 {
  content: "\23F6";
}

.panel-1 {
  padding: 0 18px;
  background-color: white;
  color: #424241;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  font-size: 18px;
  font-family: 'Ubuntu';
}

<button class="accordion">Γενικ?? Πληροφορ?ε?</button>
<div class="panel-1">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion2">Α?τια</button>
<div class="panel-1">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion">ΔΕΠ-Υ στα παιδι?</button>
<div class="panel-1">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion2">ΔΕΠ-Υ στου? εν?λικε?</button>
<div class="panel-1">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion">Συννοσηρ?τητα</button>
<div class="panel-1">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion2">Δι?γνωση</button>
<div class="panel-1">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion">Φαρμακευτικ? αγωγ?</button>
<div class="panel-1">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion2">Ψυχοθεραπε?α</button>
<div class="panel-1">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion">Coaching για τη ΔΕΠ-Υ</button>
<div class="panel-1">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

uj5u.com熱心網友回復：

您需要添加

.accordion2.active {
  color: #F7A600;
}

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.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight   "px";
    }
  });
}

var acc = document.getElementsByClassName("accordion2");
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.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight   "px";
    }
  });
}

.accordion {
  font-family: default;
  cursor: pointer;
  background-color: #F7A600;
  color: #ffffff;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 26px;
  transition: 0.4s;
  font-family: 'Ubuntu';
}

.accordion2.active,
.accordion:hover {
  background-color: #ffffff;
  color: #F7A600;
}

.accordion:after {
  content: '\23F7';
  font-weight: bold;
  float: float;
  margin-left: 15px;
}

.active:after,
.accordion {
  content: "\23F6";
}

.accordion2 {
  font-family: default;
  cursor: pointer;
  background-color: #009ACB;
  color: #ffffff;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 26px;
  transition: 0.4s;
  font-family: 'Ubuntu';
}

.active,
.accordion2:hover {
  background-color: #ffffff;
  color: #009ACB;
}

.accordion2:after {
  content: '\23F7';
  font-weight: bold;
  float: float;
  margin-left: 5px;
}

.active:after,
.accordion2 {
  content: "\23F6";
}

.panel-1 {
  padding: 0 18px;
  background-color: white;
  color: #424241;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  font-size: 18px;
  font-family: 'Ubuntu';
}

<button class="accordion">Γενικ?? Πληροφορ?ε?</button>
<div class="panel-1">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion2">Α?τια</button>
<div class="panel-1">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion">ΔΕΠ-Υ στα παιδι?</button>
<div class="panel-1">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion2">ΔΕΠ-Υ στου? εν?λικε?</button>
<div class="panel-1">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion">Συννοσηρ?τητα</button>
<div class="panel-1">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion2">Δι?γνωση</button>
<div class="panel-1">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion">Φαρμακευτικ? αγωγ?</button>
<div class="panel-1">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion2">Ψυχοθεραπε?α</button>
<div class="panel-1">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion">Coaching για τη ΔΕΠ-Υ</button>
<div class="panel-1">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

uj5u.com熱心網友回復：

首先你定義了這樣的風格：

.active, .accordion:hover {
  background-color: #ffffff;
  color: #F7A600;
}

過了一會兒，你寫了這個：

.active, .accordion2:hover {
  background-color: #ffffff;
  color: #009ACB;
}

基本上，您對active課程進行了兩次造型，第二次覆寫了第一次。您可以這樣做來修復它：

.active, .accordion:hover, .accordion2:hover {
  background-color: #ffffff;
}

.accordion:hover, .accordion2.active {
  color: #F7A600;
}

.accordion2:hover, .accordion.active  {
  color: #009ACB;
}

如果您不完全了解不同的 css 選擇器，我建議您在此處閱讀它們：https ://www.w3schools.com/cssref/css_selectors.asp

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/475718.html

標籤：javascript html

上一篇：即使我定義了一個字串，我也收到了一個錯誤，即使我定義了一個字串，我也收到了一個錯誤

下一篇：僅當它是超過3位數的數字時才顯示INR數字