javascript - 如何选择同级元素的子元素？

Question

我的 Accordion 根据其打开和关闭不断填充我的 div 空间。我想在它周围包裹一个 div 并将其设置为展开的 Accordion 的高度以防止这种行为。问题是我的 js 依赖于选择 this.nextSibling ，这会破坏一切。

var acc = document.getElementsByClassName("review-button");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].onclick = function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;

      if (panel.style.maxHeight){
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + 'px';
    } 
  }
}

它必须在范围内使用“this”，因为有多个 Accordion 。我最初的想法是做一些类似的事情......

this.nextElementSibling.children[0];

但这没有用。

如何将当前内容包装在具有设定高度的 div 中，同时仍保留 Accordion 功能？

<!--accordion 1-->     
<button class="review-button"  data-target="#demo{{ gameIndex }}">
     <span class="review-button-chevron fa fa-angle-down"></span>       
      Our Reviews
     </button>

<!-- Slide out -->
<div class="quote-machine-container">
    <div id="demo{{ gameIndex }}" class=" quote-machine"></div>
</div>

<!--accordion 2-->
 <button class="review-button"  data-target="#demo{{ gameIndex }}">
     <span class="review-button-chevron fa fa-angle-down"></span>       
      Our Reviews
     </button>

<!-- Slide out -->
<div class="quote-machine-container">
    <div id="demo{{ gameIndex }}" class=" quote-machine"></div>
</div>

Answer 1

1. 排名分别为 <header>和<div>在它自己的<section>
2. 将所有内容包裹在 <main> 中并添加了 eventListener()到它。对它的任何点击都将委托(delegate)给被点击的 header ( e.target 。)
3. 事件处理程序 ( acc() ) 将:
   • 确定什么是 e.target (单击的节点)将其与 e.currentTarget 进行比较(当前正在捕获的节点。)
   • 一旦建立，e.target将失去或获得.active类。
   • 为了消除 nextElementSibling 的限制属性，我们用一个简单的 CSS 规则集替换该功能:.active + .x-panel与 nextElementSibling 基本相同.

片段

var main = document.getElementById("x-main");

main.addEventListener('click', acc, false);

function acc(e) {
  if (e.target !== e.currentTarget) {
    var tgt = e.target;
    tgt.classList.toggle("active");
  }
}

.x-section {
  height: 100px;
}
.x-header {
  cursor: pointer;
  border: 3px outset grey;
  height: 30px;
}
.x-panel {
  border: 3px inset black;
  max-height: 0;
  opacity: 0;
  transition: opacity .2s ease-in;
}
.active + .x-panel {
  opacity: 1;
  max-height: 300px;
  overflow-y: hidden;
  transition: max-height 1s ease-in .1s, opacity 1s;
}

<main id='x-main'>
  <section class='x-section'>
    <header class='x-header'>HEADER</header>
    <div class='x-panel'>
      CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
    </div>
  </section>
  <section class='x-section'>
    <header class='x-header'>HEADER</header>
    <div class='x-panel'>
      CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
    </div>
  </section>
  <section class='x-section'>
    <header class='x-header'>HEADER</header>
    <div class='x-panel'>
      CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
    </div>
  </section>
</main>