javascript - js中 Accordion 上的各种按钮点击

Question

我正在构建一个 Accordion 菜单，用于在我的页面中进行设置，如图所示，这里默认显示 header1 菜单，当我单击“确认”按钮(标题 1)时，它必须隐藏 header1 并显示 header2 内容？

JS部分

 var accItem = document.getElementsByClassName('accordionItem');
        var accHD = document.getElementsByClassName('accordionItemHeading');
        var submitBtn = document.getElementsByClassName('submit');
        for (i = 0; i < accHD.length; i++) {
            accHD[i].addEventListener('click', function toggleItem(){
                var itemClass = this.parentNode.className; 
                Ember.Logger.debug(itemClass);
                for (i = 0; i < accItem.length; i++) {
                    accItem[i].className = 'accordionItem close';
                }
                if (itemClass == 'accordionItem close') {
                    this.parentNode.className = 'accordionItem open';
                }
            });
  submitBtn[i].addEventListener('click', function toggleItem(){
                var itemBtnClass = this.childNodes[i];
                Ember.Logger.debug(itemBtnClass);
                for (i = 0; i < accItem.length; i++) {
                    accItem[i].className = 'accordionItem close';
                }
                this.childNodes[i].className = 'accordionItem open';
            });}

HTML 部分

 <div class="accordionWrapper">
 <div class="accordionItem open">
 <h2 class="accordionItemHeading" >Select Server</h2>
 <div class="accordionItemContent" align="center">
    <br>
    <button class="submit">Conform</button>
    <button class="cancel">Cancel</button><br><br>
   </div>
  </div>
  <div class="accordionItem close">
    <h2 class="accordionItemHeading" >Select Group</h2>
    <div class="accordionItemContent" align="center">
    <input type="radio" name="Group" value="Testing">Testing<br><br>
    <button class="submit">Conform</button>
    <button class="cancel">Cancel</button><br><br>
    </div>
 </div>
 <div class="accordionItem close">
<h2 class="accordionItemHeading" >Timing</h2>
    <div class="accordionItemContent" align="center">
        <button class="submit">Conform</button>
        <button class="cancel">Cancel</button><br><br>
        </div>
      </div>
   <div class="accordionItem close">
   <h2 class="accordionItemHeading" >Notification</h2>
    <div class="accordionItemContent" align="center">
        <button class="submit">Conform</button>
        <button class="cancel">Cancel</button><br><br>
    </div>
  </div>
 </div>

Answer 1

 var accItem = document.getElementsByClassName('accordionItemContent');
 var accHD = document.getElementsByClassName('accordionItemHeading');
 var submitBtn = document.getElementsByClassName('submit');

 function toggleHeader() {
   var itemClass = this.nextElementSibling.className;

   //Ember.Logger.debug(itemClass);
   for (i = 0; i < accItem.length; i++) {
     accItem[i].className = 'accordionItemContent close';
   }
   if (itemClass == 'accordionItemContent close') {
     this.nextElementSibling.className = 'accordionItemContent open';
   }
 }

 function toggleItem() {
   var itemClass = this.parentNode.className;
   var nextItem = -1;

   //Ember.Logger.debug(itemBtnClass);
   for (i = 0; i < accItem.length; i++) {

     if (accItem[i] == this.parentNode) { // identify next accordian item to open 
       nextItem = i + 1;
     }

     if (i != nextItem)
       accItem[i].className = 'accordionItemContent close';
     else
       accItem[i].className = 'accordionItemContent open';
   }
 }

 for (i = 0; i < accHD.length; i++) {
   accHD[i].addEventListener('click', toggleHeader);
   submitBtn[i].addEventListener('click', toggleItem);
 }

.accordionItemContent.close {
  display: none;
}

<div class="accordionWrapper">
  <div class="accordionItem">
    <h2 class="accordionItemHeading">Select Server</h2>
    <div class="accordionItemContent open" align="center">
      <br>
      <button class="submit">Confirm</button>
      <button class="cancel">Cancel</button>
      <br>
      <br>
    </div>
  </div>
  <div class="accordionItem">
    <h2 class="accordionItemHeading">Select Group</h2>
    <div class="accordionItemContent close" align="center">
      <input type="radio" name="Group" value="Testing">Testing
      <br>
      <br>
      <button class="submit">Confirm</button>
      <button class="cancel">Cancel</button>
      <br>
      <br>
    </div>
  </div>
  <div class="accordionItem">
    <h2 class="accordionItemHeading">Timing</h2>
    <div class="accordionItemContent close" align="center">
      <button class="submit">Confirm</button>
      <button class="cancel">Cancel</button>
      <br>
      <br>
    </div>
  </div>
  <div class="accordionItem">
    <h2 class="accordionItemHeading">Notification</h2>
    <div class="accordionItemContent close" align="center">
      <button class="submit">Confirm</button>
      <button class="cancel">Cancel</button>
      <br>
      <br>
    </div>
  </div>
</div>