鼠标悬浮显示二级菜单效果的jquery实现

1.布局：


<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控制：


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);
});
}




有用  |  无用 取消

猜你喜欢