手风琴是MooTools提供的最受欢迎的插件.它有助于隐藏和显示数据.让我们更多地讨论它.
手风琴所需的基本元素是成对的切换及其内容.让我们创建html的标题和内容对.
<h3 class = "togglers">Toggle 1</h3> <p class = "elements">Here is the content of toggle 1</p> <h3 class = "togglers">Toggle 2</h3> <p class = "elements">Here is the content of toggle 2</p>
查看以下语法，了解如何根据上述HTML结构构建手风琴.
var toggles = $$('.togglers');
var content = $$('.elements');
var AccordionObject = new Fx.Accordion(toggles，content);让我们举个例子来定义Accordion的基本功能.请看下面的代码.
<!DOCTYPE html>
<html>
<head>
<style>
.togglers {
padding: 4px 8px;
color: #fff;
cursor: pointer;
list-style: none;
width: 300px;
background-color: #222;
border: 1px solid;
}
</style>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
window.addEvent('domready', function() {
var toggles = $$('.togglers');
var content = $$('.elements');
var AccordionObject = new Fx.Accordion(toggles, content);
});
</script>
</head>
<body>
<h3 class = "togglers">Toggle 1</h3>
<p class = "elements">Here is the content of toggle 1</p>
<h3 class = "togglers">Toggle 2</h3>
<p class = "elements">Here is the content of toggle 2</p>
<h3 class = "togglers">Toggle 3</h3>
<p class = "elements">Here is the content of toggle 3</p>
</body>
</html>Accordion提供了巨大的功能.这些功能有助于调整选项以提供自定义输出.
此选项确定页面加载时显示的元素.默认设置为0，因此第一个元素显示.要设置另一个元素，只需输入与其索引对应的另一个整数.与"show"不同，display会将元素转换为打开状态.
语法
var AccordionObject = new Accordion(toggles, content {
display: 0 //default is 0
});很像"显示"，show确定在页面加载时将打开哪个元素，而是转换时，"show"只会使内容显示在加载状态而不会发生任何转换.
语法
var AccordionObject = new Accordion(toggles, content {
show: 0 //default is 0
});设置为true时，在显示的元素之间切换时会发生高度转换效果.是你在上面看到的标准手风琴设置.
语法
var AccordionObject = new Accordion(toggles, content {
height: true //default is true
});这与 height 选项相同.但是，这不是转换高度来显示内容，而是有助于转换宽度.如果您使用标准设置的"width"，就像我们上面使用的那样，那么标题切换之间的空间将根据内容的高度保持不变.然后，"content"div将从左向右过渡以显示在该空间中.
语法
var AccordionObject = new Accordion(toggles, content {
width: false //default is false
});此选项决定在隐藏或显示某些内容时是否显示不透明度过渡效果.由于我们使用上面的默认选项，您可以在那里看到效果.
语法
var AccordionObject = new Accordion(toggles, content {
opacity: true //default is true
});要设置固定高度，您需要修复一个整数(例如，您可以设置100内容100px高).如果您计划使用小于内容自然高度的固定高度，则应使用某种CSS溢出属性.
语法
var AccordionObject = new Accordion(toggles, content {
fixedHeight: false //default is false
});就像上面的"fixedHeight"一样，如果你给这个选项一个整数，这将设置宽度.
语法
var AccordionObject = new Accordion(toggles, content {
fixedWidth: false //default is false
});此选项可让您为标题添加切换控件.如果设置为true，当您单击打开的内容标题时，内容元素将自动关闭而不会打开任何其他内容.您可以在以下示例中看到执行.
语法
var AccordionObject = new Accordion(toggles, content {
alwaysHide: false //default is false
});这些活动可让您为Accordion的每个动作创建功能.
这将在您切换打开元素时执行.它将传递切换控制元素和打开的内容元素以及参数.
语法
var AccordionObject = new Accordion(toggles, content {
onActive: function(toggler, element) {
toggler.highlight('#76C83D'); //green
element.highlight('#76C83D');
}
});当元素开始隐藏并传递正在关闭但未打开的所有其他元素时执行.
语法
var AccordionObject = new Accordion(toggles, content {
onBackground: function(toggler, element) {
toggler.highlight('#DC4F4D'); //red
element.highlight('#DC4F4D');
}
});这是您的标准onComplete事件.它传递一个包含内容元素的变量.
语法
var AccordionObject = new Accordion(toggles, content {
onComplete: function(one, two, three, four){
one.highlight('#5D80C8'); //blue
two.highlight('#5D80C8');
three.highlight('#5D80C8');
four.highlight('#5D80C8');
}
});这些方法可帮助您创建和操作Accordion章节.
使用此方法，您可以添加一个部分(切换/内容元素对).它像我们看到的许多其他方法一样工作.首先引用手风琴对象，使用.addSection，然后你可以调用标题的id，内容的id，最后说明你希望新内容出现在哪个位置(0是第一个位置).
语法
AccordionObject.addSection('togglersID', 'elementsID', 2);注意 : 当您添加这样的部分时，虽然它将显示在索引2的位置，但实际索引将是 + 1最后一个索引.因此，如果您的数组中有5个项目(0-4)并且添加了6 th ，则无论您在何处添加它，其索引都将为5.addSection();
这可以让你打开一个给定的元素.您可以通过索引选择元素(因此，如果您添加了一个元素对并且想要显示它，那么此处将使用与上面使用的索引不同的索引.
语法
AccordionObject.display(5);//将显示新添加的元素
示例
以下示例解释了带有一些效果的Accordion功能.请查看以下代码.
<!DOCTYPE html>
<html>
<head>
<style>
.togglers {
color: #222;
margin: 0;
padding: 2px 5px;
background: #EC7063;
border-bottom: 1px solid #ddd;
border-right: 1px solid #ddd;
border-top: 1px solid #f5f5f5;
border-left: 1px solid #f5f5f5;
font-size: 15px;
font-weight: normal;
font-family: 'Andale Mono', sans-serif;
}
.ind {
background: #2E86C1;
border-bottom: 1px solid #ddd;
border-right: 1px solid #ddd;
border-top: 1px solid #f5f5f5;
border-left: 1px solid #f5f5f5;
font-size: 20px;
color: aliceblue;
font-weight: normal;
font-family: 'Andale Mono', sans-serif;
width: 200px;
}
</style>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
window.addEvent('domready', function() {
var toggles = $$('.togglers');
var content = $$('.elements');
var AccordionObject = new Fx.Accordion(toggles, content, {
show: 0,
height : true,
width : false,
opacity: true,
fixedHeight: false,
fixedWidth: false,
alwaysHide: true,
onActive: function(toggler, element) {
toggler.highlight('#DC7633'); //green
element.highlight('#DC7633');
$('active').highlight('#DC7633');
},
onBackground: function(toggler, element) {
toggler.highlight('#AED6F1'); //red
element.highlight('#AED6F1');
$('background').highlight('#F4D03F');
}
});
$('display_section').addEvent('click', function(){
AccordionObject.display(4);
});
});
</script>
</head>
<body>
<div id = "active" class = "ind">onActive</div>
<div id = "background" class = "ind">onBackground</div>
<div id = "accordion_wrap">
<p class = "togglers">Toggle 1: click here</p>
<p class = "elements">Here is the content of toggle 1 Here is the content of
toggle 1 Here is the content of toggle 1 Here is the content of toggle 1 Here
is the content of toggle 1 Here is the content of toggle 1 Here is the content
of toggle 1 Here is the content of toggle 1</p>
<p class = "togglers">Toggle 2: click here</p>
<p class = "elements">Here is the content of toggle 2</p>
<p class = "togglers">Toggle 3: click here</p>
<p class = "elements">Here is the content of toggle 3</p>
<p class = "togglers">Toggle 4: click here</p>
<p class = "elements">Here is the content of toggle 4</p>
</div>
<p>
100
<button id = "display_section" class = "btn btn-primary">
display section
</button>
</p>
</body>
</html>输出
点击每个切换部分，然后你会发现隐藏的数据每个动作的事件指标.
