Bagaimana untuk menukar warna latar belakang butang pada klik/HTML

Question

Saya membuat butang serupa dengan "Baca Lagi" dan apabila saya menekannya, teks mengembang ke bawah. Apabila teks mengembang, latar belakang butang berubah dan apabila saya menekan butang sekali lagi untuk menutup teks (cth. "Kurang Baca"), latar belakang butang kembali kepada keadaan asalnya. Bagaimana untuk melaksanakan fungsi ini

function myFunction() {
        var dots = document.getElementById("dots");
        var moreText = document.getElementById("more");
        var btnText = document.getElementsByClassName("skillBtn");
      
        if (dots.style.display === "none") {
          dots.style.display = "inline";
          btnText.innerHTML = "阅读更多";
          moreText.style.display = "none";
        } else {
          dots.style.display = "none";
          btnText.innerHTML = "阅读更少";
          moreText.style.display = "inline";
        }
      }

#more {display: none;}

<div align="center"><h1 id="skillsid" style="margin-top:10px ;"> 编程语言 <span id="dots"></span> </h1><span id="more">
    这里写了一些内容
    
    <div align="center"><a href="#skillsid"><button class="skillBtn" onclick="myFunction()" ></button></a></div>

Answer 1

Apa yang anda cuba lakukan dipanggil Accordion. Tidak perlu menulisnya dalam JS kerana sudah ada <details>和<summary> dalam HTML untuk mencapai fungsi ini:

#more {
  display: none;
}

<details>
  <summary>编程语言</summary>
  这里写了一些内容
</details>