mootools手风琴造型问题

【问题标题】：mootools accordion styling problemmootools手风琴造型问题
【发布时间】：2010-03-19 13:58:21
【问题描述】：

我刚刚构建了我的第一个 mootools 手风琴，但它添加了很多内联样式，这只是破坏了我的 UI。我可以使用 !important 关键字设置内联样式，但这只会让我的 css 维护成为一场噩梦。任何想法如何摆脱内联样式

就是这样

<script language="javascript">
   window.addEvent('domready', function() {

 //create our Accordion instance
 var myAccordion = new Accordion($('accordion'), 'div.subTreeHeader', 'div.accordionElement', {
 opacity: false, fixedHeight:400

 });

});

</script>

【问题讨论】：

您能告诉我们您是如何制作手风琴的吗？您是否创建了脚本、使用了一些插件等？
为您的标记和 js 创建一个 jsfiddle 帖子，以便我们准确了解您想要实现的目标。
回答有用吗？虽然晚了:)

标签： javascript mootools

【解决方案1】：

这是一个很老的问题，我回答它是因为我在寻找同样的问题时会遇到它。

实际上 Mootools Accordion 添加了这么多内联 CSS：

padding-top: 0px; border-top-style: 
none; padding-bottom: 0px; border-bottom-style: none; 
overflow: hidden; opacity: 1;

我为此找到的解决方案是调用new Fx.Accordion 后必须应用的修复程序。我也同意用!important CSS 修复来修复感觉不对。所以我也寻找其他选择。

选项1，根据需要设置css：

$$('.acordion3_content').setStyles({
    border: '3px solid #0F0',
    'overflow-y': 'auto',
});

选项 2，在其内部或外部再创建一个 div。我做了这个选项来获得一个可以连接事件的滚动 div。像这样，我可以在手风琴的内容中滚动，而不会受到 Fx.Acordion 的 CSS 的影响。

【讨论】：