今天要搞一个折叠菜单,本来是想自己写一个的,后来时间比较紧,说实话吧,就是人比较懒了,再说,现在都有很多现成的JQ插件,也没有必要再把时间花到这上面。下面是我用的插件的一个比较详细的介绍,希望对大家有帮助。

首先,accordion 的意思是手风琴,发音是 饿考滴儿 ,嘿嘿,我觉得大家在使用的时候应该使用它的正确发音,我想是因为效果像是手风琴吧,所以叫做accordion吧!

<!DOCTYPE html><html><head> <link type=”text/css” href=”http://jqueryui.com/latest/themes/base/ui.all.css” rel=”stylesheet” /> <script type=”text/javascript” src=”http://jqueryui.com/latest/jquery-1.3.2.js”></script> <script type=”text/javascript” src=”http://jqueryui.com/latest/ui/ui.core.js”></script> <script type=”text/javascript” src=”http://jqueryui.com/latest/ui/ui.accordion.js”></script>

<script language=”javascript”>
$(function(){
//Accordion 先设定属性,标题头就是h3,默认选项是第二个,默认选项是从0开始的,icons是设置图标的,下面有详细讲解
“#accordion”).accordion({header:”h3″,active:1,event:”mouseover”,icons: { ‘header’: ‘ui-icon-plus’, ‘headerSelected’: ‘ui-icon-minus’};

$(‘#accordion’).bind(‘accordionchange’, function(event, ui) {
alert($(ui.newHeader).html());
});//这里绑定了一个change事件,下面有详解,注意:在这里绑定change必须用“accordionchange”.

</script>
<style type=”text/css”>
body{font:62.5% “宋体”,”Trebuchet MS”,sans-serif;margin:50px;}
.demoHeaders{margin-top:2em;}
#container1{
width:200px;
}
</style>
</head>

<body>
<div id=”container1″>
<!–Accordion–>
<h2>Accordion</h2>
<div id=”accordion”>
?? <div >
???? <h3 id=1><a href=”#”>WEB开发笔记</a></h3>
<div>www.chhua.com。</div>
?? </div>
?? <div >
???? <h3 id=2><a href=”#”>WEB开发笔记贰</a></h3>
<div>www.chhua.com?</div>
?? </div>
?? <div >
???? <h3 id=3><a href=”#”>WEB开发笔记叁</a></h3>
<div>www.chhua.com。</div>
?? </div>
</div>
</div>
</body>
</html>

看完例子,大家来看看手风琴的详细参数吧。哈哈~~哈哈~~哈哈,又出现了一次。
要使用这个插件ui.core.js和ui.accordion.js这两个js文件是必不可少的,当然jquery文件也是必须的,好像是废话哦。
1 选项:
1.1 active 这个参数是设置默认选项的,默认情况下是0,也就是第一个哦。哈哈。
初始化设置例:$(‘#accordion’).accordion({ active: 2 });
在初始化之后的获取和设置例:
//获取 var active = $(‘#accordion’).accordion(‘option’, ‘active’);

//设置 $(‘#accordion’).accordion(‘option’, ‘active’, 2);
1.2 animated 这个参数是设置动画效果 默认选项是‘slide’
可以设置你喜欢的动画效果,或不使用动画效果(设置false),除了默认设置,使用’bounceslide’和’easeslide’需要UI Effects Core 。。。嘿嘿。。。
初始化设置例: $(‘#accordion’).accordion({ animated: ‘easeslide’ });
在初始化之后的获取和设置例:
//获取
var animated = $(‘#accordion’).accordion(‘option’, ‘animated’);
//设置
$(‘#accordion’).accordion(‘option’, ‘animated’, ‘easeslide’);
1.3 autoHeight 默认是true,如果设置,所有内容部分的高被设定为其中最高内容的高。 初始化设置:$('#accordion').accordion({ autoHeight: false });<br />
初始化以后的获取或设置<br />
//获取<br />
var autoHeight = $('#accordion').accordion('option', 'autoHeight');<br />
//设置<br />
$('#accordion').accordion('option', 'autoHeight', false);<br />
1.4 <span style="color: #ff0000">clearStyle</span> 默认是false,似乎是清除style,哈哈~~~<br />
初始化设置 $('#accordion').accordion({ clearStyle: true });<br />
初始化后的获取和设置和上面的差不多。。。省略。。。<br />
1.5 <span style="color: #ff0000">event </span>默认是'click' 如何展开选项。可以设置长双击、鼠标滑过等。。。<br />
初始化设置例:$('#accordion').accordion(event:"mouseover");<br />
初始化后的设置请参考上面的 ,此处省略。。。<br />
1.6 <span style="color: #ff0000">fillSpace</span> ,充满父元素的高,默认为false ,使用此项,autoHeight无效。<br />
初始化设置例:$('#accordion').accordion({ fillSpace: true });<br />
初始化后的获取和设置请参考上面的 ,此处省略。。。<br />
1.7 <span style="color: #ff0000">header</span>,设置头元素(见上面实例),默认值为:'> li > :first-child,> :not(li):even'<br />
此处省略,自己理解。。。<br />
1.8 <span style="color: #ff0000">icon</span>,设置小图标,默认值为: { 'header': 'ui-icon-triangle-1-e', 'headerSelected': 'ui-icon-triangle-1-s' }<br />
另外,请看下面的英国字儿~~~只可意会不可言传。。。<br />
Icons to use for headers. Icons may be specified for 'header' and 'headerSelected', and we recommend using the icons native to the <a href="http://www.chhua.com/web-notetag/jquery-ui" rel="noopener noreferrer nofollow" target="_blank" title="jQuery UI">jQuery UI</a> CSS Framework manipulated by <a href="http://www.themeroller.com/" rel="noopener noreferrer nofollow" target="_blank" title="http://www.themeroller.com">jQuery UI ThemeRoller</a>

初始化设置例:$('#accordion').accordion({ icons: { 'header': 'ui-icon-plus', 'headerSelected': 'ui-icon-minus' } });
初始化后的获取和设置省略。。。
1.9 navigation 和navigationFilter暂时不知道到底是做什么用的,回头再说吧。。。

2 事件
2.1 change事件 accordion改变时触发的事件,有两种绑定方法
第一种:
$('#accordion').bind('accordionchange', function(event, ui) {
ui.newHeader // jQuery 对象, 激活 header
ui.oldHeader // jQuery 对象, 之前 header
ui.newContent // jQuery 对象, 激活 content
ui.oldContent // jQuery 对象, 之前 content
});这种方法在前面的例子中已经都有喽~~
第二种:
$('#accordion').accordion({
?? change: function(event, ui) { ... }
}); 看清楚了吧。哈哈。

3 方法
3.1 destroy :毁灭地球...
使用方法:.accordion( 'destroy' )
3.2 disable:accordion不可用,使之无效。
使用方法:.accordion('disable')
3.3 enable: 可用,使之有效,使用方法:略...
3.4 option:参数,使用方法:前面都已经用过了,例:.accordion( 'option' , optionName , [value] )
3.5 activate:也是设置默认选项,和参数active 作用一样。例:.accordion( 'activate' , index )