Javascript 如何选择同级元素的子元素？

我的手风琴不断填满我的

div

空间，随着它的打开和关闭越来越大。我想在其周围环绕一个

div

，并将其设置为展开的手风琴的高度，以防止这种行为。问题是我的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';
    } 
  }
}

但那没用

如何在保持手风琴功能的同时，以设定的高度将当前内容包装在

div

中

<!--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>

我们的评论
我们的评论

将每个

和

放在它自己的

将所有内容包装在

中，并向其中添加了

eventListener（）

。对它的任何单击都将委托给已单击的标题（

e.target

）

事件处理程序（

acc（）

）将：

• 将

  e.target

  （单击的节点）与

  e.currentTarget

  （此时正在捕获的节点）进行比较，确定什么是

  e.target

  （单击的节点）
• 一旦建立，

  e.target

  将失去或获得

  .active

  类
• 为了消除

  nextElementSibling

  的限制属性，我们将该功能替换为一个简单的CSS规则集：

  .active+.x-panel

  ，它与

  nextElementSibling

  基本相同

片段

var main=document.getElementById（“x-main”）；
main.addEventListener（'click'，acc，false）；
行政协调会（e）职能{
如果（e.target！==e.currentTarget）{
var tgt=e.target；
tgt.classList.toggle（“活动”）；
}
}

.x-section{
高度：100px；
}
.x头{
光标：指针；
边框：3件灰色；
高度：30px；
}
.x面板{
边框：3件镶嵌黑色；
最大高度：0；
不透明度：0；
过渡：不透明度。2秒缓解；
}
.有源+x面板{
不透明度：1；
最大高度：300px；
溢出y：隐藏；
过渡：最大高度1s缓进.1s，不透明度1s；
}

标题
内容内容
标题
内容内容
标题
内容内容内容

将每个

和

放在它自己的

将所有内容包装在

中，并向其中添加了

eventListener（）

。对它的任何单击都将委托给已单击的标题（

e.target

）

事件处理程序（

acc（）

）将：

• 将

  e.target

  （单击的节点）与

  e.currentTarget

  （此时正在捕获的节点）进行比较，确定什么是

  e.target

  （单击的节点）
• 一旦建立，

  e.target

  将失去或获得

  .active

  类
• 为了消除

  nextElementSibling

  的限制属性，我们将该功能替换为一个简单的CSS规则集：

  .active+.x-panel

  ，它与

  nextElementSibling

  基本相同

片段

var main=document.getElementById（“x-main”）；
main.addEventListener（'click'，acc，false）；
行政协调会（e）职能{
如果（e.target！==e.currentTarget）{
var tgt=e.target；
tgt.classList.toggle（“活动”）；
}
}

.x-section{
高度：100px；
}
.x头{
光标：指针；
边框：3件灰色；
高度：30px；
}
.x面板{
边框：3件镶嵌黑色；
最大高度：0；
不透明度：0；
过渡：不透明度。2秒缓解；
}
.有源+x面板{
不透明度：1；
最大高度：300px；
溢出y：隐藏；
过渡：最大高度1s缓进.1s，不透明度1s；
}

标题
内容内容
标题
内容内容
标题
内容内容内容

请包含您的HTML代码段。您确定在onclick函数中此==acc[I]吗？请包含您的HTML代码段。您确定在onclick函数中此==acc[I]吗？我应该可以从这里找到答案，您真是太棒了，先生。快乐的编码。我应该能从这里找到答案，你真是太棒了，先生。快乐编码。

<!--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>