试图在打开时更改 Bootstrap 手风琴标题的背景颜色

Trying to change the background color of the Bootstrap accordion title when opened

我正在处理这个项目,并试图在手风琴打开时更改它的背景颜色。我喜欢它关闭时是齐平的,但不喜欢它打开时的白色背景。

我也在尝试改变箭头的位置,使它们在一条直线上。

这是我目前拥有的:

console.log(1)
$(".accordion-button").click(function(){
  console.log(2)
  var dest = $(this).attr("data-bs-target");
  $(dest)[0].scrollIntoView();
});
.accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FEB7EE'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
body {
    background-image: linear-gradient(rgba(143,25,154,1), rgba(200, 5, 158, 0.8));
    opacity: 1;
    position: relative;
    overflow: scroll;
  }

.accordion-title {
    font-variant-caps: titling-caps;
    position: absoulte;
}

.accordion-button {
    font-size: 20px;
    font-family: Red Rose;
    color: #FEB7EE !important;
}

.accordion-button:after {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FEB7EE'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !important;
  }
.accordion-header:collapse {background-color:black !important;}
.accordion-button collapse {
    color: rgb(224, 16, 176);
  }
h1 {
    font-family: Red Rose;
    color: #FEB7EE;
}
h2 {
    font-family: Raleway;
    color: #FEB7EE;
}
p {
    font-family: Raleway;
}
<!--html-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<!--javascript-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>

<!DOCTYPE html>
<html lang="eng">
<head>
 <link href="https://fonts.googleapis.com/css?family=Red+Rose&display=swap" rel="stylesheet" />
 <link href="https://fonts.googleapis.com/css?family=Raleway&display=swap" rel="stylesheet" />
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

 <!--<script type="module">
  import { Toast } from 'bootstrap.esm.min.js'

  Array.from(document.querySelectorAll('.toast'))
    .forEach(toastNode => new Toast(toastNode))
</script>-->
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.rtl.min.css" integrity="sha384-4dNpRvNX0c/TdYEbYup8qbjvjaMrgUPh+g4I03CnNtANuv+VAvPL6LqdwzZKV38G" crossorigin="anonymous">

</head>

 <body>
<div class="container">
<div class="row">
<div class="col-md-6">

<!--bootstrap-->
  
<title>Raspberry Pilot</title>
<!--intro-->
<h1 class="display-1">Raspberry Pi-lot</h1>
<h2 class="display-6">The Raspberry Pi may be a computer smaller than a deck of cards, but you’ll be surprised what it can do!</h1>
<!--accordion-->
<div class="accordion accordion-flush" id="accordionFlushExample">
<!--about-->
  <div class="accordion-item">
    <h2 class="accordion-header" id="flushAbout">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne" onclick="about"()>
       About
      </button>
    </h2>
    <div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
      <div class="accordion-body about"><p><strong>Raspberry Pi is a</strong> fully featured, low cost, tiny Linux computer that is an easy way to learn programming and computing.</p></div>
    </div>
  </div>
  <!--ingredients-->
  <div class="accordion-item">
    <h2 class="accordion-header" id="flushIngredients">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
        What You'll Need
      </button>
    </h2>
    <div id="flush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo" data-bs-parent="#accordionFlushExample">
      <div class="accordion-body"><img src="" class="img-fluid" alt="raspberry pi icon" width="100" height="100">
        <h3>Raspberry Pi</h3>
        <p>Go with models 3 and higher.</p>
        <img src="" class="img-fluid" alt="hdmi monitor icon" width="100" height="100">
        <h3>HDMI Monitor</h3>
        <p>An HDMI TV works too!</p>
        <img src="" alt="SD card icon" class="img-fluid" width="100" height="100">
        <h3>SD Card</h3>
        <p>Aim for at least 8GB.</p>
        <img src="" class="img-fluid" alt="USB Mouse" width="100" height="100">
        <h3>USB Mouse</h3>
        <p>You can switch to a wireless mouse later.</p>
        <img src="" class="img-fluid" alt="USB Keyboard icon" width="100" height="100">
        <h3>USB Keyboard</h3>
        <p>You can switch to a wireless keyboard later.</p>
        <img src="" class="img-fluid" alt="power supply icon" width="100" height="100">
        <h3>Power Supply</h3>
        <p>Standard 5V USB C or Micro depending on the model.</p>
      </div>
    </div>
  </div>
  <!--SetUp-->
  <div class="accordion-item">
    <h2 class="accordion-header" id="flushSetUp">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree">
       Set Up
      </button>
    </h2>
    <div id="flush-collapseThree" class="accordion-collapse collapse" aria-labelledby="flush-headingThree" data-bs-parent="#accordionFlushExample">
      <div class="accordion-body"><h4>Set up your SD card.</h4>
        <p>Install NOOBS via Raspbian, then insert it into the Raspberry Pi. </p>
        <a href="url"> Link to download NOOBS </a>
        <h4>Plug everything in.</h4>
        <img src="programming.gif" class="img-fluid" alt="Computer Man" style="width:100px;height:100px;">"
        <p>Make sure everything is plugged in before turning it on.</p>
      </div>
    </div>
  </div>
  <!--options-->
  <div class="accordion-item">
    <h2 class="accordion-header" id="flushOptions">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseFour" aria-expanded="false" aria-controls="flush-collapseFour">
       What Can You Do?
      </button>
    </h2>
    <div id="flush-collapseFour" class="accordion-collapse collapse" aria-labelledby="flush-headingFour" data-bs-parent="#accordionFlushExample">
      <div class="accordion-body"><h4>Set up your SD card.</h4>
        <p>Install NOOBS via Raspbian, then insert it into the Raspberry Pi. </p>
        <a href="url"> Link to download NOOBS </a>
        <h4>Plug everything in.</h4>
        <img src="programming.gif" class="img-fluid" alt="Computer Man" style="width:100px;height:100px;">"
        <p>Make sure everything is plugged in before turning it on.</p></div>
      </div>
    </div>

  <!--python-->
  <div class="accordion-item">
    <h2 class="accordion-header" id="flushPython">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseFive" aria-expanded="false" aria-controls="flush-collapseFive">
       Code with Python
      </button>
    </h2>
    <div id="flush-collapseFive" class="accordion-collapse collapse" aria-labelledby="flush-headingFive" data-bs-parent="#accordionFlushExample">
      <div class="accordion-body"><h4>Open Thonny</h4>
        <p>Use Thonny to create new programs and systems on your Raspberry Pi </p>
        <a href="url"> Link to see what you can do with Python </a>
        <h4>Learn Python</h4>
        <img src="programming.gif" class="img-fluid" alt="Computer Man" style="width:100px;height:100px;">"
      </div>
    </div>
  </div>
<!--accessories-->
<div class="accordion-item">
  <h2 class="accordion-header" id="flushAccessories">
    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseSix" aria-expanded="false" aria-controls="flush-collapseSix">
      Add Ons & Accessories
    </button>
  </h2>
  <div id="flush-collapseSix" class="accordion-collapse collapse" aria-labelledby="flush-headingSix" data-bs-parent="#accordionFlushExample">
    <div class="accordion-body"><div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">
      <div class="carousel-indicators">
        <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
        <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Slide 2"></button>
        <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2" aria-label="Slide 3"></button>
      </div>
      <div class="carousel-inner">
        <div class="carousel-item active" data-bs-interval="10000">
          <img src="..." class="d-block w-100 img-fluid" alt="...">
          <div class="carousel-caption d-none d-md-block">
            <h5>First slide label</h5>
            <p>Some representative placeholder content for the first slide.</p>
          </div>
        </div>
        <div class="carousel-item" data-bs-interval="2000">
          <img src="..." class="d-block w-100 img-fluid" alt="...">
          <div class="carousel-caption d-none d-md-block">
            <h5>Second slide label</h5>
            <p>Some representative placeholder content for the second slide.</p>
          </div>
        </div>
        <div class="carousel-item">
          <img src="..." class="d-block w-100" alt="...">
          <div class="carousel-caption d-none d-md-block">
            <h5>Third slide label</h5>
            <p>Some representative placeholder content for the third slide.</p>
          </div>
        </div>
      <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleDark"  data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
      </button>
      <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleDark"  data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
      </button>
      </div>
    </div>
  </div>
</div>

 <!--sensehat-->
 <div class="accordion-item" >
   <h2 class="accordion-header" id="flushSenseHat">
     <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseSeven" aria-expanded="false" aria-controls="flush-collapseSeven">
   SenseHat
      </button>
  
    </h2>
      <div id="flush-collapseSeven" class="accordion-collapse collapse" aria-labelledby="flush-headingSeven" data-bs-parent="#accordionFlushExample">
        <img src="" class="img-fluid" alt="SenseHat Demo" width="200" height="250">
  <pre>
  <code>
  from sense_hat import SenseHat
  sense = SenseHat()

  # Define some colours
  g = (0, 255, 0) # Green
  b = (0, 0, 0) # Black

  # Set up where each colour will display
    creeper_pixels = [
      g, g, g, g, g, g, g, g,
      g, g, g, g, g, g, g, g,
      g, b, b, g, g, b, b, g,
      g, b, b, g, g, b, b, g,
      g, g, g, b, b, g, g, g,
      g, g, b, b, b, b, g, g,
      g, g, b, b, b, b, g, g,
      g, g, b, g, g, b, g, g
    ]

  # Display these colours on the LED matrix
    sense.set_pixels(creeper_pixels)
  </code>
  </pre>
    </div>
  </div>
  <!--projects-->
  <div class="accordion-item">
    <h2 class="accordion-header" id="flushSenseHat">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseEight" aria-expanded="false" aria-controls="flush-collapseEight">
       SenseHat Projects
      </button>
    </h2>
    <div id="flush-collapseEight" class="accordion-collapse collapse" aria-labelledby="flush-headingEight" data-bs-parent="#accordionFlushEight">
      <div class="accordion-body">
        <div class="card-group">
          <div class="card">
            <img src="..." class="card-img-top" alt="...">
            <div class="card-body">
              <h5 class="card-title">Project 1</h5>
              <p class="card-text">This will be a cool project idea.</p>
            </div>
          </div>
          <div class="card">
            <img src="..." class="card-img-top" alt="...">
            <div class="card-body">
              <h5 class="card-title">Project 2</h5>
              <p class="card-text">Another cool project. </p>
            </div>
          </div>
          <div class="card">
            <img src="..." class="card-img-top" alt="...">
            <div class="card-body">
              <h5 class="card-title">Project 3</h5>
              <p class="card-text">Last cool project goes here.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!--resources-->
  <div class="accordion-item">
    <h2 class="accordion-header" id="flushResources">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseNine" aria-expanded="false" aria-controls="flush-collapseNine">
       Raspberry Pi Resources
      </button>
    </h2>
    <div id="flush-collapseNine" class="accordion-collapse collapse" aria-labelledby="flush-headingNine" data-bs-parent="#accordionFlushNine">
      <div class="accordion-body">
        <ul class="list-group list-group-flush">
          <li class="list-group-item">Link</li>
          <li class="list-group-item">Another Link</li>
          <li class="list-group-item">Another another link</li>
          <li class="list-group-item">Fourth link</li>
          <li class="list-group-item">Last link</li>
        </ul>
      </div>
    </div>
  </div>
  <!--end tag-->
  </div>
  </div>
</body>
<link href="./stylesheet.css" rel="stylesheet"/>
<script src="script.js"></script>
</html>

在你的文件中很简单stylesheet.css,添加这段代码

.accordion-button:not(.collapsed) {
    color: #0c63e4;
    background-color: #FEB7EE;
}