帶有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

可能會對您有所幫助或在此處獲得更多詳細信息

//編輯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');
});