mootools fx.Accordian 内容由于某种原因未显示
我是 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 正确显示，但是，当我单击它时手风琴内容不显示。谁能帮我看看为什么这不起作用？
I'm new to MooTools and I'm trying to implement the fx.Accordian plugin.
I've included MooTools as well as the Accordian plugin. I'm really not trying to do anything much different than what is shown in the demo from the MooTools web site.
In my css, I've inserted:
#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;
}
Inside a script tag in my header file I have:
window.addEvent('domready', function(){
new Fx.Accordion($('accordion'), '#accordion h2', '#accordion .accordion_content');
});
And then I'm trying to do something like the following in 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>
I get the accordion H2 displaying properly, however, when I click on it the accordion content doesn't display. Can anyone help me to see why this isn't working?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
您的代码没有任何问题，您所需要做的就是在 html 中添加更多手风琴部分。从文档中：
“Fx.Accordion 类创建一组元素，单击它们的手柄时会切换这些元素。当一个元素切换到视图中时，其他元素切换出。”
因此，一个带有单个元素的手风琴元素没有多大意义 - 作为唯一的元素，无论你做什么，它始终是活动元素。
我在您的原始代码中添加了一个
切换器和另一个内容，并且它运行良好。请参阅http://jsfiddle.net/YayQD/1/There is nothing wrong with your code, all you need to do is add more accordion sections to your html. From the documentation:
"The Fx.Accordion class creates a group of Elements that are toggled when their handles are clicked. When one Element toggles into view, the others toggle out."
So an accordion with a single element does not make much sense - being the only one, it will always be the active element no matter what you do.
I added one more
<h2>toggler and another content<div>to your original code and it works perfectly. See http://jsfiddle.net/YayQD/1/