更新时间:2022-08-20 15:29:07
为什么做了这样一个的功能呢?原因是前一段时间jQuery群里有个朋友想实现这样一个东东,大家都知道jQuery中有现成的slideDown和slideUp方法,但那是向下展开,而这个是一个完全相反的效果。
功能展示链接 http://runjs.cn/detail/v6i9g6g0
其实这样一个功能也蛮奇怪的,感觉不是很实用,但是当时也没有一下子做出来,试着写了一会儿觉得不能马上写完就say sorry了。
最近呢又开始接着继续学习jQuery的东西,学到animate动画的时候,自己就在想,是不是可以用来实现一下这个功能呢(这个真是个心结啊~~)?然后就试着写了一下,经过一番波折,不仅让我对animate的使用更加了解之外,也让我了解了一个用jQuery的小技巧,更重要的是,实现这个功能。
下面上代码并做出解析:
Html部分:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
< div >
< span >Item1.1</ span >
< span >Item1.2</ span >
< span >Item1.3</ span >
< span >Item1.4</ span >
</ div >
< div >
< span >Item2.1</ span >
< span >Item2.2</ span >
< span >Item2.3</ span >
< span >Item2.4</ span >
</ div >
< div >
< span >Item3.1</ span >
< span >Item3.2</ span >
</ div >
< div >
< span >Item4.1</ span >
< span >Item4.2</ span >
</ div >
< div class = "menu" >
< span >Item1</ span >
< span >Item2</ span >
< span >Item3</ span >
< span >Item4</ span >
</ div >
|
文档结构是这样子的,大家可以看到menu这个主菜单的菜单项的顺序与子菜单的实际顺序是一致的。这个是为点击菜单项上的条目通过位置查找对应子项做的一个设计。
jQuery部分:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
|
$( function () {
$( "div" ).each( function () { //遍历所有div元素
if ($( this ).is( "[class='menu']" )) { //如果是菜单所在的div
$( this ).css({ "top" : $( this ).height() + $( this ).position().top,
"position" : "absolute" ,
"color" : "white" ,
"background-color" : "white" ,
"width" : "500px" ,
"left" : "200px"
}) //为菜单添加样式
.children( "span" ).css({ "background-color" : "DimGrey" ,
"border" : "black solid thin"
}) //为菜单项添加样式
.each( function () { //对每个菜单项进行遍历
$( this ).click( function () { //添加click事件
var Ind = $( "div.menu" ).children().index( this ); //找出当前点击的菜单项是菜单div中的第几个span
var FocusEle = $( "div:eq(" + Ind + ")" ); //将选中菜单项的子项设成一个变量
if ($( "div[class*='up']" ).size() == 0) { //说明是第一次加载,初次的时候为没选中任何菜单项的状态,所以up的个数为0
FocusEle.animate(
{
top: $( this ).height() - 10 //使对应的子项向上移动
},
'normal' , //中速移动
function () {
$( this ).addClass( "up" ); //移动完之后为这个子项加上up的样式
});
} else { //如果不是初次加载
$( "div[class*='up']" ).animate( //找到正在显示的菜单子项
{
top: $( this ).height() + 10 //使对应子项向下移动
},
'normal' ,
function () {
$( this ).removeClass( "up" ); //移除这个子项的up样式
FocusEle.animate( //一
{
top: $( this ).height() - 10 //将重新选中的菜单子项向上移动
},
'normal' ,
function () {
$( this ).addClass( "up" ); //添加up样式
});
})
//***************************特别说明**********************
// .queue(function () {二 // FocusEle.animate( // { // top: $(this).height() - 10 // }, // 'slow', // function () { // $(this).addClass("up"); // }); // }); }
}).css( "cursor" , "pointer" ).hover( function () {
$( this ).css( "color" , "red" );
}, function () {
$( this ).css( "color" , "white" );
})
});
}
else { //如果不是菜单所在的div,即菜单子项
var Index = $( "div" ).index( this );
var Left = $( "div.menu span:eq(" + Index + ")" ).position().left + 200; //修改不同子项的横坐标,使其与菜单项的条目一致
$( this ).css({ "top" : $( this ).height() + $( this ).position().top,
"left" : Left,
"color" : "white" ,
"position" : "absolute"
}) //为菜单子项添加样式
.children().css({
"background-color" : "SlateGrey" ,
"border" : "black solid thin" ,
"cursor" : "pointer"
}).hover( function () {
$( this ).css( "color" , "red" );
}, function () {
$( this ).css( "color" , "white" );
});
}
})
});
|
上面的代码几乎是逐条注释的,大家应该都能看懂,主要的实现思想我还是说一下,大家再结合着注释看就OK了,大家会发现实现这个功能的时候完全没有显示(show()),隐藏(hide())的操作,最开始我也是一个思维误区,以为必须要用显示,隐藏去实现,但做着做着发现了一个非常傻的问题,展开的效果实现上是通过移动隐藏和显示来实现的。怎么说呢,大家想想看完电影之后演员名单那部分的东西就能有个概念了。
这里有两点很重要:
1、这5个div全部为absolute形式的,因为只有这样才能进行相对移动
2、所谓的消失,实际上是4个子项的div被menu div也遮挡住了,所以这里要知道,我给menu div加了背景色,即白色。
说到这大家应该就知道是如何实现的了吧?
另外在说一 下 注释中”特别说明”的那部分,其实这部分代码与它上面不远处的【一】的代码是一样的,只是前面加了.queue这么东西,这是做什么的呢?就是将多个动画放到一个队列里,然后依据队列的次序,一个一个的展现出来。我的初衷就是,如果当前有子项是展开状态的,那么就“先”把其关闭,“后”把新点击的子项展开。
不过不知道为什么,如果是二次进行了点击的子项,就不会再经过queue 中animate结束时那个function了。这个有明白为什么的朋友可以帮忙解答一下。然而像我【一】中这个实现,也是合乎规则的。
其实这个小功能还有点弊端,就是如果点击过快,大家会发现同时展开多项子菜单,原因是动画的过程是需要时间的,而在这段时间里我没有禁止click事件。应该是用指派命名空间的方法就可以搞定。大家可以研究研究然后告诉我。
最后总结了一下,写这个小功能有点惭愧的说写了挺长时间,中间换了好多方法为解决一些问题,现在看来,这么简单的东西为什么会写这么久,还是因为最开始的时候没有想好,边写边想花费了许多时间。以后要改进这种做事方法。