javascript - 当元素的前一个兄弟元素具有特定类时，如何设置元素的样式？

Question

我想在打开 Accordion button.accordion.is-open 时在 Accordion accordion-content 类的内容中添加边框。可以通过纯 CSS 实现吗？

setTimeout(function(){
    
const accordionBtns = document.querySelectorAll(".accordion");

accordionBtns.forEach((accordion) => {
  accordion.onclick = function () {
    this.classList.toggle("is-open");

    let content = this.nextElementSibling;

    if (content.style.maxHeight) {
      //this is if the accordion is open
      content.style.maxHeight = null;
    } else {
      //if the accordion is currently closed
      content.style.maxHeight = content.scrollHeight + "px";
    }
  };
});

}, 200); 

button.accordion {
  width: 100%;
  background-color: whitesmoke;
  border: 1px solid #333;
  outline: none;
  text-align: left;
  padding: 15px 20px;
  font-size: 18px;
  font-weight: 500;
  color: #333;
  cursor: pointer;
  transition: background-color 0.2s linear;
}

button.accordion:after {
  font-family: "Font Awesome 5 Free";
  content: "\f067";
  font-size: 18px;
  float: right;
  font-weight: 900;
}

button.accordion.is-open:after {
  content: "\f068";
  font-weight: 900;
}

button.accordion:hover,
button.accordion.is-open {
  background-color: #ddd;
}

.accordion-content {
  background-color: white;
  padding: 0 20px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-in-out;
}

<button class="accordion">Show Solution</button>
<div class="accordion-content">
<p>
kmax, kmin = k.max(), k.min()<br />
k_new = (k - kmin)/(kmax - kmin)
</p>
</div>

Answer 1

您只需使用基于开放 Accordion 类的同级选择器。您可能需要添加透明边框和过渡以防止跳跃。

setTimeout(function() {

  const accordionBtns = document.querySelectorAll(".accordion");

  accordionBtns.forEach((accordion) => {
    accordion.onclick = function() {
      this.classList.toggle("is-open");

      let content = this.nextElementSibling;

      if (content.style.maxHeight) {
        //this is if the accordion is open
        content.style.maxHeight = null;
      } else {
        //if the accordion is currently closed
        content.style.maxHeight = content.scrollHeight + "px";
      }
    };
  });

}, 200);

button.accordion {
  width: 100%;
  background-color: whitesmoke;
  border: 1px solid #333;
  outline: none;
  text-align: left;
  padding: 15px 20px;
  font-size: 18px;
  font-weight: 500;
  color: #333;
  cursor: pointer;
  transition: background-color 0.2s linear;
}

button.accordion:after {
  font-family: "Font Awesome 5 Free";
  content: "\f067";
  font-size: 18px;
  float: right;
  font-weight: 900;
}

button.accordion.is-open:after {
  content: "\f068";
  font-weight: 900;
}

button.accordion:hover,
button.accordion.is-open {
  background-color: #ddd;
}

.accordion-content {
  background-color: white;
  padding: 0 20px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-in-out;
  border: 3px solid transparent; /* prevents position shift */
  transition: border 0.3s; /* softens border change */
}

.accordion.is-open + .accordion-content { /* selects following sibling element */
  border: 3px solid pink;
}

<button class="accordion">Show Solution</button>
<div class="accordion-content">
  <p>
    kmax, kmin = k.max(), k.min()<br /> k_new = (k - kmin)/(kmax - kmin)
  </p>
</div>