2011-04-29 69 views
0

我是MooTools的新手,我试图实现fx.Accordian插件。mootools fx.Acordian内容未能正确显示

我已经包含了MooTools以及Accordian插件。我真的没有尝试做与MooTools网站演示中显示的不同的东西。

在我的CSS,我已经插入:

#accordion { 
    margin: 20px 0 0; 
    max-width: 400px; 
} 

#accordion H2 { 
    background: #99ccff; 
    color: black; 
    cursor: pointer; 
    font-size: 10pt; 
    font-family: Helvetica, Arial, sans-serif; 
    text-align: left; 
    font-weight: bold; 
    line-height: 16px; 
    margin: 0 0 4px 0; 
    padding: 3px 5px 1px; 
    } 

#accordion .accordion_content { 
    background-color: #F4F5F5; 
} 

#accordion .accordion_content p { 
    margin: 0.5em 0; 
    padding: 0 6px 8px 6px; 
} 

里面的脚本标记在我的头文件我有:

window.addEvent('domready', function(){ 
    new Fx.Accordion($('accordion'), '#accordion h2', '#accordion .accordion_content'); 
}); 

然后我试图做类似下面的在HTML中:

<div id='accordion' class='customized'> 
<h2>What not #1</h2> 
<div class='accordion_content'> 
    <p>What not #1 is being displayed now</p> 
</div> 
</div> 

我得到的手风琴H2正常显示,但是,当我点击它的手风琴co内容不显示。任何人都可以帮我看看为什么这不起作用吗?

回答

1

你的代码没有问题,你只需要在你的html中添加更多的手风琴部分。从文档:

“的Fx.Accordion类创建一组被点击的手柄时被触发元素当一个元素切换到视图,其他切换出。”

所以手风琴只有一个元素没有什么意义 - 作为唯一的元素,无论你做什么,它都将始终是主动元素。

我添加了一个<h2>触发器和另一个内容<div>到您的原始代码,它的工作原理完美。见http://jsfiddle.net/YayQD/1/

+0

谢谢你让我知道。我正在测试它,假设当我得到它的工作,我会补充剩下的。 – 2011-04-29 13:16:38

+0

但是,它仍然不起作用。在jsfiddle.net(awesome site BTW)上做了一些修改之后,我发现我的MooTools的使用在某种程度上被我在同一个文件中其他地方使用jQuery $(document).ready的事实弄糊涂了。有任何想法吗? (我看到如果我现在可以找到任何东西) – 2011-04-29 13:22:47

+0

显然jQuery.noConflict();应该完成这个?尽管如此,还没有运气。 – 2011-04-29 13:25:21