1.布局：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<div class="show">
<img src="~/images/head_icon.png" />
<div class="drop" style=" display:none; z-index:80000" id="profileMenu">
<ul>
<li>
<a class="pass" style="cursor: pointer"
href='#'>
<span>修改密码</span>
</a>
</li>
<li>
<a class="quit" style="cursor: pointer"
href='#'
><span>退出</span></a>
</li>
</ul>
</div>
</div>
|
2.js控制：
|
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
|
function dropMenu(obj) {
$(obj).each(function () {
var theSpan = $(this);
var theMenu = theSpan.find(".drop");
var tarHeight = theMenu.height();
theMenu.css({ height: 0, opacity: 0 });
var t1;
function expand() {
clearTimeout(t1);
//theSpan.find('a').addClass("selected");
theMenu.stop().show().animate({ height: tarHeight, opacity: 1 }, 200);
}
function collapse() {
clearTimeout(t1);
t1 = setTimeout(function () {
// theSpan.find('a').removeClass("selected");
theMenu.stop().animate({ height: 0, opacity: 0 }, 200, function () {
$(this).css({ display: "none" });
});
}, 250);
}
theSpan.hover(expand, collapse);
theMenu.hover(expand, collapse);
});
}
|