手风琴与嵌套的子级别

Question

我的同事为我们的内部网络做了一个单级手风琴，我想把它发展成一个多级手风琴（我想在最终版本中有3个级别）。我尝试通过制作一个新的css-part（'questionv3'）并在js中扩展if语句来继承它，从而为手风琴添加一个子级。 但是，运行代码时未正确显示嵌套内容。我觉得我在div中添加div的方法不起作用。

有关如何使这项工作的任何建议？非常感谢您的帮助。

链接到codepen：http://codepen.io/discoking1986/pen/amaZYw

var dhtmlgoodies_slideSpeed = 50; // Higher value = faster
var dhtmlgoodies_timer = 5; // Lower value = faster

var objectIdToSlideDown = false;
var dhtmlgoodies_activeId = false;
var dhtmlgoodies_slideInProgress = false;
var dhtmlgoodies_slideInProgress = false;
var dhtmlgoodies_expandMultiple = true; // true if you want to be able to have multiple items expanded at the same time.

function showHideContent(e,inputId)
{
 if(dhtmlgoodies_slideInProgress)return;
 dhtmlgoodies_slideInProgress = true;
 if(!inputId)inputId = this.id;
 inputId = inputId + '';
 var numericId = inputId.replace(/[^0-9]/g,'');
 var answerDiv = document.getElementById('dhtmlgoodies_a' + numericId);

 objectIdToSlideDown = false;

 if(!answerDiv.style.display || answerDiv.style.display=='none'){
  if(dhtmlgoodies_activeId &&  dhtmlgoodies_activeId!=numericId && !dhtmlgoodies_expandMultiple){
   objectIdToSlideDown = numericId;
   slideContent(dhtmlgoodies_activeId,(dhtmlgoodies_slideSpeed*-1));
  }else{

   answerDiv.style.display='block';
   answerDiv.style.visibility = 'visible';

   slideContent(numericId,dhtmlgoodies_slideSpeed);
  }
 }else{
  slideContent(numericId,(dhtmlgoodies_slideSpeed*-1));
  dhtmlgoodies_activeId = false;
 }
}
function slideContent(inputId,direction)
{

 var obj =document.getElementById('dhtmlgoodies_a' + inputId);
 var contentObj = document.getElementById('dhtmlgoodies_ac' + inputId);
 height = obj.clientHeight;
 if(height==0)height = obj.offsetHeight;
 height = height + direction;
 rerunFunction = true;
 if(height>contentObj.offsetHeight){
  height = contentObj.offsetHeight;
  rerunFunction = false;
 }
 if(height<=1){
  height = 1;
  rerunFunction = false;
 }

 obj.style.height = height + 'px';
 var topPos = height - contentObj.offsetHeight;
 if(topPos>0)topPos=0;
 contentObj.style.top = topPos + 'px';
 if(rerunFunction){
  setTimeout('slideContent(' + inputId + ',' + direction + ')',dhtmlgoodies_timer);
 }else{
  if(height<=1){
   obj.style.display='none';
   if(objectIdToSlideDown && objectIdToSlideDown!=inputId){
    document.getElementById('dhtmlgoodies_a' + objectIdToSlideDown).style.display='block';
    document.getElementById('dhtmlgoodies_a' + objectIdToSlideDown).style.visibility='visible';
    slideContent(objectIdToSlideDown,dhtmlgoodies_slideSpeed);
   }else{
    dhtmlgoodies_slideInProgress = false;
   }
  }else{
   dhtmlgoodies_activeId = inputId;
   dhtmlgoodies_slideInProgress = false;
  }
 }
}



function initShowHideDivs()
{
 var divs = document.getElementsByTagName('DIV');
 var divCounter = 1;
 for(var no=0;no<divs.length;no++){
  if(divs[no].className=='questionV2'|| divs[no].className=='questionV3'){
   divs[no].onclick = showHideContent;
   divs[no].id = 'dhtmlgoodies_q'+divCounter;
   var answer = divs[no].nextSibling;
   while(answer && answer.tagName!='DIV'){
    answer = answer.nextSibling;
   }
   answer.id = 'dhtmlgoodies_a'+divCounter;
   contentDiv = answer.getElementsByTagName('DIV')[0];
   contentDiv.style.top = 0 - contentDiv.offsetHeight + 'px';
   contentDiv.className='answer_content';
   contentDiv.id = 'dhtmlgoodies_ac' + divCounter;
   answer.style.display='none';
   answer.style.height='1px';
   divCounter++;
  }
 }
}
window.onload = initShowHideDivs;

@charset "utf-8";
   .questionV2{ /* Styling question */
    /* Start layout CSS */
    width:432px;
    border:1px solid #46743c;
    font-size:11px;
    font-weight:bold;
    margin-bottom:0px;
    margin-top:4px;
    margin-left:0px;
    margin-right:0px;
    padding-top:10px;
    padding-bottom:10px;
    padding-left:20px;
    padding-right:10px;
    color:white;
    background-color: #77966c;
    position:relative;
    /* End layout CSS */
    overflow:hidden;
    cursor: pointer;
    }
.questionV3{    /* Styling question */
    /* Start layout CSS */
    width:380px;
    border:1px solid #46743c;
    font-size:11px;
    font-weight:bold;
    margin-bottom:0px;
    margin-top:4px;
    margin-left:0px;
    margin-right:0px;
    padding-top:10px;
    padding-bottom:10px;
    padding-left:20px;
    padding-right:10px;
    color:white;
    background-color: #6dbc4a;
    position:relative;
    /* End layout CSS */
    overflow:hidden;
    cursor: pointer;
    }
    .answer{    /* Parent box of slide down content */
    /* Start layout CSS */
    margin:0px;
    padding-bottom:10px;
    padding-left:0px;
    padding-right:0px;
    padding-top:10px;
    width:464px;
    /* End layout CSS */
    visibility:hidden;
    height:0px;
    overflow:hidden;
    position:relative;
    border-top: none;
    }
    .answer_content{    /* Content that is slided down */
    /* Start layout CSS */
    margin-left:0px;
    margin-right:0px;
    padding-right:0px;
    padding-bottom:0px;
    padding-left:0px;
    padding-top:0px;
    position:relative;
    width:464px;
    /* End layout CSS */
    }

<div class="questionV2">Level 1</div>
<div class="answer">
<div>
  <p>Some text goes here</p>
<div class="questionV3">Sub-level 1</div>
<div class="answer">
<div>
<p>Some text goes here</p>
</div>
</div>
</div>
</div>
<div class="questionV2">Level 2</div>
<div class="answer">
<div>
  <p>Some text goes here</p>
<div class="questionV3">Sub-level 2</div>
<div class="answer">
<div>
<p>Some text goes here</p>
</div>
</div>
</div>
</div>