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>

我可以正确显示手风琴H2，但是当我点击它时手风琴内容不会显示。任何人都可以帮我看看为什么这不起作用？

Answer 1

您的代码没有任何问题，您需要做的就是为您的html添加更多的手风琴部分。来自文档：

“Fx.Accordion类创建了一组在单击其控制柄时切换的元素。当一个元素切换到视图时，其他元素切换出来。”

所以一个单一元素的手风琴没有多大意义 - 作为唯一一个，无论你做什么，它都将永远是主动元素。

我在原始代码中添加了一个<h2>切换器和另一个内容<div>，它完美无缺。见http://jsfiddle.net/YayQD/1/

mootools fx.Accordian内容由于某种原因没有显示

1 个答案: