多手风琴与mootools的问题

Multi Accordion with mootools problem

本文关键字：问题 mootools 手风琴更新时间：2023-09-26

我创建了一个带有嵌套部分的mootools accordion:

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

有人能帮忙吗??

谢谢

这可能会对你有所帮助，或者在这里获得更多细节

//编辑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');
});