使用jQuery制作手风琴效果(转)

使用jQuery制作手风琴效果

本例主要讲解如何利用jQuery创建一个简单的手风琴风格的竖向菜单，从易到难。

第一步:搭建基本结构。

 

我使用的是dl dt dd 结构，如下所示：
< dl id="sfqclick" >
< dt class="leftIco">MainLink-1< /dt>
< dd>
< a href="#">SubLink-1< /a>
< a href="#">SubLink-2< /a>
< a href="#">SubLink-3< /a>
< /dd>
......
< /dl>

 

演示：http://www.cssrain.cn/demo/sfq-menu/demo1.html

第二步:添加onclick事件

代码如下：
$(document).ready(function(){
//点击触发
$("#sfqclick dt").click(function(){
$(this).toggleClass("bottomIco")
.next().slideToggle(300)
.siblings("dd").slideUp("slow");
$(this).siblings("dt").removeClass("bottomIco");
});
});

演示：http://www.cssrain.cn/demo/sfq-menu/demo2.html

第三步:当前点击计入cookie ，刷新保持

通过cookie，可以记住客户最后点得目录，然后刷新后，依然保持。

$(document).ready(function(){
//点击触发
$("#sfqclick dt").click(function(){
$(this).toggleClass("bottomIco")
.next().slideToggle(300)
.siblings("dd").slideUp("slow");
$(this).siblings("dt").removeClass("bottomIco");
var index = $("#sfqclick dt").index(this);
$.cookie('the_cookie', index ); // 设置cookie
});
var cookievalue= $.cookie('the_cookie');
if( cookievalue){
$("#sfqclick dt").eq(cookievalue).click();
}
});

 

演示：http://www.cssrain.cn/demo/sfq-menu/demo3.html

第四步:改为添加onmouseover事件

直接把 click 改成 mouseover？ 当然没那么简单。请你看下Demo4吧。
演示：http://www.cssrain.cn/demo/sfq-menu/demo4.html

第五步:为mouseover事件添加延迟时间设置

通过给mouseover添加延迟，解决了demo4中的bug。
演示：http://www.cssrain.cn/demo/sfq-menu/demo5.html

第六步:在onmouseover的基础上添加onclick

有时候也需要onclick事件，所以需要在onmouseover的基础上，添加onclick。
演示：http://www.cssrain.cn/demo/sfq-menu/demo6.html

第七步:最终效果

大功告成，感谢你看到这里。
演示：http://www.cssrain.cn/demo/sfq-menu/demo7.html

本文所涉及的例子打包下载：
http://www.cssrain.cn/demo/sfq-menu/sfq-menu.rar