javascript - mootools fx.Accordian 内容由于某种原因未显示

Question

我是 MooTools 的新手，我正在尝试实现 fx.Accordian 插件。

我已经包含了 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>

我可以正确显示 Accordion H2，但是，当我单击它时， Accordion 内容不会显示。谁能帮我看看为什么这不起作用？

Answer 1

您的代码没有任何问题，您需要做的就是在您的 html 中添加更多 Accordion 部分。来自文档:

“Fx.Accordion 类创建了一组元素，这些元素在单击它们的 handle 时切换。当一个元素切换到 View 中时，其他元素切换出 View 。”

因此，只有一个元素的 Accordion 没有多大意义 - 作为唯一的元素，无论您做什么，它都将始终是事件元素。

我又加了一个<h2>切换器和另一个内容 <div>到你的原始代码，它工作得很好。参见 http://jsfiddle.net/YayQD/1/