如何设置仅激活或扩展的 Bootstrap 手风琴卡的样式？

Question

我正在使用 bootstrap 4 手风琴，我想为.card边框设置样式仅用于show collapse 。

 var active = document.querySelector(".collapse.show"); active.parentNode.style.border = "1px solid #ea8523";

 .page-wrapper.default-address { padding: 50px 20px; background-color: #ffffff; border: 1px solid #e5e5e5; border-radius: 4px; } @media (min-width: 768px) {.page-wrapper.default-address { padding: 50px 40px; } }.page-wrapper.default-address.card { width: 340px; max-width: 100%; margin: auto; margin-bottom: 25px; border: 1px dashed #4e5254; border-radius: 10px; background-color: #f6f6f6; }.page-wrapper.default-address.card.card-header { border: none; background: none; }.page-wrapper.default-address.card.default-button { width: 100%; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-shadow: none; box-shadow: none; line-height: 1; padding: 0; }.page-wrapper.default-address.card.default-button img { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: 0.3s ease-in; -o-transition: 0.3s ease-in; transition: 0.3s ease-in; }.page-wrapper.default-address.card.default-button span { font-size: 12px; color: #4e5254; display: block; line-height: 1.5; }.page-wrapper.default-address.card.default-button.default-name { font-weight: 600; line-height: 2; }.page-wrapper.default-address.card.default-button:not(.collapsed) img { -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); }.page-wrapper.default-address.card.card-body.form-group { margin-bottom: 10px; }.page-wrapper.default-address.card.card-body.form-group label { font-size: 12px; color: #4e5254; }.page-wrapper.default-address.card.card-body.form-group.form-control { background-color: #fffbfb; font-size: 12px; height: calc(1.5em + 0.75rem); border: 1px solid #cfcfcf; border-radius: 2px; }.page-wrapper.default-address.card.card-foot { margin-bottom: 40px; text-align: center; }.page-wrapper.default-address.card.card-foot.btn { font-size: 12px; width: 96px; border-radius: 2px; border-color: #ea8523; height: 30px; }.page-wrapper.default-address.card.card-foot.btn-primary { background-color: #ea8523; }.page-wrapper.default-address.card.card-foot.btn-outline-primary { background-color: transparent; color: #ea8523; margin-right: 16px; }

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" /> <div class="page-wrapper"> <section class="default-address"> <div class="accordion" id="accordionAddress"> <div class="row"> <div class="col-md-6 col-lg-4"> <div class="card"> <div class="card-header" id="headingOne"> <h2 class="mb-0"> <button class="btn default-button collapsed text-left" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> <div> <span class="default-name">Raju Sharma</span> <span>64, New Ratna Bunglows, </span> <span>Mumbai, India.</span> </div> <img class="img-fluid" src="./assets/images/icons/arrow-1x.png" /> </button> </h2> </div> <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionAddress"> <form> <div class="card-body pt-0"> <div class="form-group"> <label>NAME</label> <input type="text" class="form-control" placeholder="Default Text Input" /> </div> <div class="form-group"> <label>ADDRESS</label> <input type="text" class="form-control" placeholder="Default Text Input" /> </div> <div class="form-group"> <label>ZIP CODE</label> <input type="text" class="form-control" placeholder="Default Text Input" /> </div> <div class="form-group"> <label>CITY</label> <input type="text" class="form-control" placeholder="Default Text Input" /> </div> <div class="form-group"> <label>COUNTRY</label> <select class="form-control" placeholder="Default Text Input"> <option>INDIA</option> <option>USA</option> <option>UK</option> </select> </div> </div> <div class="card-foot"> <button type="submit" class="btn btn-outline-primary"> CANCEL </button> <button type="submit" class="btn btn-primary"> SAVE </button> </div> </form> </div> </div> </div> <div class="col-md-6 col-lg-4"> <div class="card"> <div class="card-header" id="headingTwo"> <h2 class="mb-0"> <button class="btn default-button collapsed text-left" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo"> <div> <span class="default-name">Raju Sharma</span> <span>64, New Ratna Bunglows, </span> <span>Mumbai, India.</span> </div> <img class="img-fluid" src="./assets/images/icons/arrow-1x.png" /> </button> </h2> </div> <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionAddress"> <form> <div class="card-body pt-0"> <div class="form-group"> <label>NAME</label> <input type="text" class="form-control" placeholder="Default Text Input" /> </div> <div class="form-group"> <label>ADDRESS</label> <input type="text" class="form-control" placeholder="Default Text Input" /> </div> <div class="form-group"> <label>ZIP CODE</label> <input type="text" class="form-control" placeholder="Default Text Input" /> </div> <div class="form-group"> <label>CITY</label> <input type="text" class="form-control" placeholder="Default Text Input" /> </div> <div class="form-group"> <label>COUNTRY</label> <select class="form-control" placeholder="Default Text Input"> <option>INDIA</option> <option>USA</option> <option>UK</option> </select> </div> </div> <div class="card-foot"> <button type="submit" class="btn btn-outline-primary"> CANCEL </button> <button type="submit" class="btn btn-primary"> SAVE </button> </div> </form> </div> </div> </div> <div class="col-md-6 col-lg-4"> <div class="card"> <div class="card-header" id="headingThree"> <h2 class="mb-0"> <button class="btn default-button collapsed text-left" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="true" aria-controls="collapseThree"> <div> <span class="default-name">Raju Sharma</span> <span>64, New Ratna Bunglows, </span> <span>Mumbai, India.</span> </div> <img class="img-fluid" src="./assets/images/icons/arrow-1x.png" /> </button> </h2> </div> <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionAddress"> <form> <div class="card-body pt-0"> <div class="form-group"> <label>NAME</label> <input type="text" class="form-control" placeholder="Default Text Input" /> </div> <div class="form-group"> <label>ADDRESS</label> <input type="text" class="form-control" placeholder="Default Text Input" /> </div> <div class="form-group"> <label>ZIP CODE</label> <input type="text" class="form-control" placeholder="Default Text Input" /> </div> <div class="form-group"> <label>CITY</label> <input type="text" class="form-control" placeholder="Default Text Input" /> </div> <div class="form-group"> <label>COUNTRY</label> <select class="form-control" placeholder="Default Text Input"> <option>INDIA</option> <option>USA</option> <option>UK</option> </select> </div> </div> <div class="card-foot"> <button type="submit" class="btn btn-outline-primary"> CANCEL </button> <button type="submit" class="btn btn-primary"> SAVE </button> </div> </form> </div> </div> </div> <div class="col-md-6 col-lg-4"> <div class="card"> <div class="card-header" id="headingFour"> <h2 class="mb-0"> <button class="btn default-button text-left" type="button" data-toggle="collapse" data-target="#collapseFour" aria-expanded="true" aria-controls="collapseFour"> <div> <span class="default-name">Raju Sharma</span> <span>64, New Ratna Bunglows, </span> <span>Mumbai, India.</span> </div> <img class="img-fluid" src="./assets/images/icons/arrow-1x.png" /> </button> </h2> </div> <div id="collapseFour" class="collapse show" aria-labelledby="headingFour" data-parent="#accordionAddress"> <form> <div class="card-body pt-0"> <div class="form-group"> <label>NAME</label> <input type="text" class="form-control" placeholder="Default Text Input" /> </div> <div class="form-group"> <label>ADDRESS</label> <input type="text" class="form-control" placeholder="Default Text Input" /> </div> <div class="form-group"> <label>ZIP CODE</label> <input type="text" class="form-control" placeholder="Default Text Input" /> </div> <div class="form-group"> <label>CITY</label> <input type="text" class="form-control" placeholder="Default Text Input" /> </div> <div class="form-group"> <label>COUNTRY</label> <select class="form-control" placeholder="Default Text Input"> <option>INDIA</option> <option>USA</option> <option>UK</option> </select> </div> </div> <div class="card-foot"> <button type="submit" class="btn btn-outline-primary"> CANCEL </button> <button type="submit" class="btn btn-primary"> SAVE </button> </div> </form> </div> </div> </div> <div class="col-md-6 col-lg-4"> <div class="card"> <div class="card-header" id="headingFive"> <h2 class="mb-0"> <button class="btn default-button collapsed text-left" type="button" data-toggle="collapse" data-target="#collapseFive" aria-expanded="true" aria-controls="collapseFive"> <div> <span class="default-name">Raju Sharma</span> <span>64, New Ratna Bunglows, </span> <span>Mumbai, India.</span> </div> <img class="img-fluid" src="./assets/images/icons/arrow-1x.png" /> </button> </h2> </div> <div id="collapseFive" class="collapse" aria-labelledby="headingFive" data-parent="#accordionAddress"> <form> <div class="card-body pt-0"> <div class="form-group"> <label>NAME</label> <input type="text" class="form-control" placeholder="Default Text Input" /> </div> <div class="form-group"> <label>ADDRESS</label> <input type="text" class="form-control" placeholder="Default Text Input" /> </div> <div class="form-group"> <label>ZIP CODE</label> <input type="text" class="form-control" placeholder="Default Text Input" /> </div> <div class="form-group"> <label>CITY</label> <input type="text" class="form-control" placeholder="Default Text Input" /> </div> <div class="form-group"> <label>COUNTRY</label> <select class="form-control" placeholder="Default Text Input"> <option>INDIA</option> <option>USA</option> <option>UK</option> </select> </div> </div> <div class="card-foot"> <button type="submit" class="btn btn-outline-primary"> CANCEL </button> <button type="submit" class="btn btn-primary"> SAVE </button> </div> </form> </div> </div> </div> <div class="col-md-6 col-lg-4"> <div class="card"> <div class="card-header" id="headingSix"> <h2 class="mb-0"> <button class="btn default-button collapsed text-left" type="button" data-toggle="collapse" data-target="#collapseSix" aria-expanded="true" aria-controls="collapseSix"> <div> <span class="default-name">Raju Sharma</span> <span>64, New Ratna Bunglows, </span> <span>Mumbai, India.</span> </div> <img class="img-fluid" src="./assets/images/icons/arrow-1x.png" /> </button> </h2> </div> <div id="collapseSix" class="collapse" aria-labelledby="headingSix" data-parent="#accordionAddress"> <form> <div class="card-body pt-0"> <div class="form-group"> <label>NAME</label> <input type="text" class="form-control" placeholder="Default Text Input" /> </div> <div class="form-group"> <label>ADDRESS</label> <input type="text" class="form-control" placeholder="Default Text Input" /> </div> <div class="form-group"> <label>ZIP CODE</label> <input type="text" class="form-control" placeholder="Default Text Input" /> </div> <div class="form-group"> <label>CITY</label> <input type="text" class="form-control" placeholder="Default Text Input" /> </div> <div class="form-group"> <label>COUNTRY</label> <select class="form-control" placeholder="Default Text Input"> <option>INDIA</option> <option>USA</option> <option>UK</option> </select> </div> </div> <div class="card-foot"> <button type="submit" class="btn btn-outline-primary"> CANCEL </button> <button type="submit" class="btn btn-primary"> SAVE </button> </div> </form> </div> </div> </div> </div> </div> </section> </div> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

现在我只想要橙色边框.card ，它是活动的或正在扩展的，其他的会有虚线边框。 我知道 JavaScript 是可能的，但我是 JavaScript 的新手，所以请帮助我。

Answer 1

当显示 class 有它时，每张卡都会添加到边框。 然后我们 select 每张卡与 javascript 并添加点击事件。

Css：

.card.show {
  border: 1px solid orange !important;
}

JS：

let cards = [...document.querySelectorAll(".card")];
cards.forEach(card => {
  card.addEventListener("click", function() {
    cards.forEach(c => c.classList.remove("show"));
    this.classList.add("show")
  })
});