2
我创建了一个mootools的手风琴,像这样嵌套的区段:多手风琴与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
能
任何人的帮助?
感谢
我已经试过了,但我是想在div上“点击”而不是标题...:/谢谢 – jribeiro