多手風琴與MooTools的問題

Question

我創建了一個mootools的手風琴，像這樣嵌套的區段：

HTML：

<div class="accordion"> 
    <h2 class="accordion_toggler_1 open">Section 1</h2> 
    <div class="sub_accordion accordion_content_1 open"> 
     <h2 class="accordion_toggler_2 open">Section 1.1</h2> 
     <div class="sub_accordion accordion_content_2 open"> 
      Content 1.1 
     </div> 

     <h2 class="accordion_toggler_3">Section 1.2</h2> 
     <div class="sub_accordion accordion_content_3"> 
      Content 1.2 
     </div> 
    </div> 
    <h2 class="accordion_toggler_4">Section 2</h2> 
    <div class="sub_accordion accordion_content_4"> 
     <h2 class="accordion_toggler_5">Section 2.1</h2> 
     <div class="sub_accordion accordion_content_5"> 
      Content 2.1 
     </div> 
     <h2 class="accordion_toggler_6">Section 2.2</h2> 
     <div class="sub_accordion accordion_content_6"> 
      Content 2.2 
     </div> 
    </div> 
    <h2 class="accordion_toggler_7">Section 3</h2> 
    <div class="sub_accordion accordion_content_7"> 
     Content 3 
    </div> 
</div> 

JS：

window.addEvent('domready', function() { 

    // Adaption IE6 
    if(window.ie6) var heightValue='100%'; 
    else var heightValue=''; 

    // Selectors of the containers for switches and content 
    var togglerName='h2.accordion_toggler_'; 
    var contentName='div.accordion_content_'; 


    // Position selectors 
    var counter=1; 
    var toggler=$$(togglerName+counter); 
    var content=$$(contentName+counter); 

    while(toggler.length>0) 
    { 

     // Apply accordion 
     new Fx.Accordion(toggler, content, { 

     onComplete: function() { 
      var element=$(this.elements[this.previous]); 
      if(element && element.offsetHeight>0) element.setStyle('height', heightValue);   
     }, 
     onActive: function(toggler, content) { 
      toggler.addClass('open'); 
     }, 
     onBackground: function(toggler, content) { 
      toggler.removeClass('open'); 
     } 
     }); 

     // Set selectors for next level 
     counter++; 
     toggler=$$(togglerName+counter); 
     content=$$(contentName+counter); 
    } 
}); 

的問題是，所有的部分都打開的時候頁面加載，我只想要第一個頂部部分和子部分。

例子：

Section 1 
    Section 1.1 
    Content 1.1 
    Section 1.2 
Section 2 
Section 3 

能

任何人的幫助？

感謝

Answer 1

可能，這將幫助您或獲得更多detail here

//編輯HTML

<div class="accordion"> 
      <h2 class="accordion_toggler_1" id="open_accordion_entry">section</h2> 
      <div class=" accordion_content_1">    
        <h2 class="accordion_toggler_2" id="open_accordion_entry1">section 1.1</h2> 
        <div class=" accordion_content_2">        
          content 1.1    
        </div>   
        <h2 class="accordion_toggler_2">section 1.2</h2> 
        <div class=" accordion_content_2"> 
          content 1.2   
        </div>    
      </div>   

      <h2 class="accordion_toggler_1">Section 2</h2> 
      <div class="accordion_content accordion_content_1"><p>content 2</p></div> 

      <h2 class="accordion_toggler_1">Section 3</h2> 
      <div class="accordion_content accordion_content_1"><p>content 3</p></div> 
     </div> 

// JS

window.addEvent('domready', function() { 

     if(window.ie6) var heightValue='100%'; 
     else var heightValue=''; 


     var togglerName='h2.accordion_toggler_'; 
    var contentName='div.accordion_content_'; 



    var counter=1; 
    var toggler=$$(togglerName+counter); 
    var content=$$(contentName+counter); 

    while(toggler.length>0) 
    { 

     new Accordion(toggler, content, { 
      opacity: false, 
      display: -1, 
      onComplete: function() { 
       var element=$(this.elements[this.previous]); 
       if(element && element.offsetHeight>0) element.setStyle('height', heightValue);   
      }, 
      onActive: function(toggler, content) { 
       toggler.addClass('open'); 
      }, 
      onBackground: function(toggler, content) { 
       toggler.removeClass('open'); 
      } 
     }); 


     counter++; 
     toggler=$$(togglerName+counter); 
     content=$$(contentName+counter); 
    }   

    $$('#open_accordion_entry1').fireEvent('click'); 
$$('#open_accordion_entry').fireEvent('click'); 
});